h1 is not animating

[designer92]

Hello, I would like to animate an h1 in red panel (line 18 to20 in JS file), but I couldn't make it happen. can someone know why please? thanks !

See the Pen jOVXGbZ by designer92 (@designer92) on CodePen

[Patrick Rijkee]

See the Pen zYoyEmO by parpar78 (@parpar78) on CodePen

 

Hey there,

 

The animation has already finished before you scroll, you can see the animation if you add a duration like i did here.

But you probably want to look into something like adding a scrolltrigger (https://greensock.com/docs/v3/Plugins/ScrollTrigger) to start the animation at the right time.

 

Take a look at what they did with the other animation in the codepen and check out the docs for more info.

 

Kind Regards,

Patrick Rijkee

[designer92]

Thanks Patrick ! I tried to put a duration like you did to animate the number 1 ( line 23 of the codepen JS) to do a simple rotation,  but not only it is not working. but it is slowing things. 

See the Pen mdOQgJZ?editors=0010 by designer92 (@designer92) on CodePen

[Patrick Rijkee]

See the Pen dyOwdeX by parpar78 (@parpar78) on CodePen

 

position the tweens at the correct time like i did here, i also made the duration a bit shorter.

in your version the rotation plays before the sections start sliding, that caused it to delay and for the rotate to not be visible.

 

Is this what you are looking for?

[designer92]

yes, thanks Patrick , I need to study more the scrolltrogger's docs