Re-renders of the CSS animation in ScrollTrigger pinned container

[Gurkaran Chhabra]

Hi, everyone.

 

Issue I'm having is that this CSS animation stops mid-way and then reloads ONLY on pinned container, making it play 2 times. It only plays 1 time and works as expected when I remove the pin. Please hard-refresh the codepen to see the issue for yourself (works best on hard-refresh on Firefox).

 

Wondering if there is any way to bypass this and actually make it work 1 time (as expected). Any help greatly appreciated.

See the Pen bGMbQrQ by karanc1434 (@karanc1434) on CodePen

[Gurkaran Chhabra]

PS: It is very apparent on a hard refresh of the codepen. (Especially apparent on Firefox).

[SteveS]

I am using firefox and hard refreshing and I am not seeing it play twice. Even opening an incognito window with the codepen doesn't cause the issue you are describing.

Also, you could save yourself a ton of work and write the animation in GSAP instead of CSS. The performance should be effectively the same.

[Gurkaran Chhabra]

3 minutes ago, SteveS said:

I am using firefox and hard refreshing and I am not seeing it play twice. Even opening an incognito window with the codepen doesn't cause the issue you are describing.

Also, you could save yourself a ton of work and write the animation in GSAP instead of CSS. The performance should be effectively the same.

That's weird. Anyways, how would you write this CSS in GSAP? Asking because I'm confused as to how to convert pseudo elements, keyframes, webkit and properties like '-webkit-animation-timing-function' into animations in GSAP. Of course, GSAP is preferred if I can achieve this.

[GreenSock]

It's impossible to access pseudo elements via JavaScript. So you'd need to use regular elements instead. The timing-function stuff is just the "ease" in GSAP. We've got way more to choose from   And you can use keyframes in GSAP if you want - that should be a pretty easy port from CSS. But the regular syntax is more powerful for many effects, so I'd recommend getting familiar with it. 

[daniel.mt]

Css animation don't play nice with elements that are moved around the dom using js ( this includes cloning / wrapping / unwrapping / appending )

 

This is why:

- on load the css animation is rendered and played

- after html & css is loaded js comes into play and starts altering the object ( in this case it gets wrapped into a pin-spacer div). This causes the animation to play again ( because css is like: hey a new element appeared and I have properties for it so let me reapply them. Oh an animation. Let me play it. Oh it already played, let's restart it) .

 

This can be viewed at its best if you constantly wrap an element into a div: here is a simple extreme case:

See the Pen MWGWgMZ by danielmtd (@danielmtd) on CodePen

 

Try to resize the window and observe that the animation is constantly restarting on each resize ( this thing is happening in your case. On load the element is wrapped inside pin-spacer, on resize the pin-spacer is refreshed - this means that the container is unwrapped and wrapped again ).

 

Now how can you avoid this ? There are 2 solutions:

 

1. As quoted above you can create another element ( replace pseudo with any valid html element ) and use gsap.

2. Use transition instead of animation. Here is an example:

See the Pen rNvNNza by danielmtd (@danielmtd) on CodePen