Skip to content

Commit

Permalink
🖍 Cleanup autoplay JSS (#30351)
Browse files Browse the repository at this point in the history
**Adding `content`**
This slipped me before, and without it `:before/:after` pseudoelements are not displayed.

**Removing `transform`**

Default translate values were used for a workaround where instead of setting `animation-play-state, we'd remove the entire animation`:

https://github.com/ampproject/amphtml/blob/c4a663d0ba13d0488c6fe73c55dc8c971ac6ec0d/src/service/video/autoplay.js#L73-L76

The bug this worked around is no longer [present](https://glitch.com/edit/#!/animation-play-state-transform) in iOS, so we can remove it. If we remove the default transform value, we can also remove the dual selector in `:before, :after {}`.
  • Loading branch information
alanorozco committed Sep 22, 2020
1 parent 1d87ec7 commit f40404f
Showing 1 changed file with 9 additions and 28 deletions.
37 changes: 9 additions & 28 deletions extensions/amp-video/1.0/autoplay.jss.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const eqCol = {
marginRight: 1,
position: 'relative',
'&:before, &:after': {
content: '""',
animation: '0s linear infinite alternate $eq-animation',
backgroundColor: '#FAFAFA',
height: '100%',
Expand All @@ -45,40 +46,20 @@ const eqCol = {
animationPlayState: 'paused',
},
'&:nth-child(1)': {
'&:before, &:after': {
transform: 'translateY(60%)',
animationDuration: '0.3s',
},
'&:after': {
animationDuration: '0.45s',
},
'&:before': {animationDuration: '0.3s'},
'&:after': {animationDuration: '0.45s'},
},
'&:nth-child(2)': {
'&:before, &:after': {
transform: 'translateY(30%)',
animationDuration: '0.5s',
},
'&:after': {
animationDuration: '0.4s',
},
'&:before': {animationDuration: '0.5s'},
'&:after': {animationDuration: '0.4s'},
},
'&:nth-child(3)': {
'&:before, &:after': {
transform: 'translateY(70%)',
animationDuration: '0.3s',
},
'&:after': {
animationDuration: '0.35s',
},
'&:before': {animationDuration: '0.3s'},
'&:after': {animationDuration: '0.35s'},
},
'&:nth-child(4)': {
'&:before, &:after': {
transform: 'translateY(50%)',
animationDuration: '0.4s',
},
'&:after': {
animationDuration: '0.25s',
},
'&:before': {animationDuration: '0.4s'},
'&:after': {animationDuration: '0.25s'},
},
};

Expand Down

0 comments on commit f40404f

Please sign in to comment.