animating

[designer92]

Hello guys,

I’m trying to animate the h2 (the number 1) in my red section, (line 23 in my codepen demo JS file, and you need to scroll to see the panel appearing) , but it's not working.

And also, the number has disappeared, and when I changed xPercent to x and delete the opacity:0,  it appears again, but still ni animation.

Can someone could tell me why please?  Thanks a lot!

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

[tailbreezy]

Hello,

 

It is working, though you animation is already completed when you get to see it.

Also check your console from time to time, you have several errors that currently aren't affecting much, but could bite you later.

You might have to read up on setting up ScrollTrigger.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

[akapowl]

 

 

Hey @designer92 - welcome to the forums.

 

It looks like the other thread you created is related to this, am I right?

If so it would be great to keep your questions focussed on one thread instead of creating multiple.

 

 

 

As tailbreezy (and Patrick in the other thread) pointed out already; your animation appears to be running - you just don't see it because it happens off-screen.

 

To help you on this, first it would be neccessary to truly understand what it is you want to achieve.

How/when do you want the animation to run? Is it supposed to be triggered at some point when the red section is in view?

 

The way you have things set up here, is that the animation for the text in the red section is being played through before you even start the fake horizontal scrolling, so logically you wouldn't be able to see anything being animated once you get to see the red section.

 

[designer92]

Hello! thanks you all for your replies! I'm still new to this.

I tried to put a duration of 10 but still can't see the animation. I just want to make a simple animation on the h1, a rotation of 360.

[tailbreezy]

Hello,

 

Working with complex scenes will only hinder your progress.

Try reading the docs and make demos as simple as possible. Here is a scrub animation of a h1.

 

See the Pen d4175e5d760c18257e66452aa4f3dfff?editors=1010 by dadacoded (@dadacoded) on CodePen

[designer92]

thanks tailbreezy! I'll start from simple demos .

[ZachSaucier]

The ScrollTrigger demos are also a very helpful resource. In particular there's one that shows how to animate in elements as they're coming into the viewport with fake horizontal scrolling like you have called "Fake horizontal sections animated once in viewport".

[designer92]

Thanks you Zack!