How to animate the heading and paragraph without affecting on other section

[Narendra Verma]

Hello,

I am learning scrolltrigger, I am trying to animate the heading and paragraph but it's not animating, sometimes when reload the page then it's already showing the  inline css.

 

This is the basic example I am trying to learn. I check this video  https://greensock.com/docs/v3/Plugins/ScrollTrigger .

 

 

Would you help me out how to animate the heading and paragraph without affecting on other section?

 

See the Pen WNGKrVd by Narendra_verma (@Narendra_verma) on CodePen

[akapowl]

Hey @Narendra Verma

 

If you want the animation to play for each section individually, you would want to loop over the sections, apply individual triggers and tween on the individual elements you got - instead of generally targetting all elements with the class of '.heading' like in your example.

 

The Most Common ScrollTrigger mistakes article has an extra section that shows an example of how to do something like that.

 

You should also avoid putting your ScrollTriggers on the individual tweens of a timeline, but set them on the timeline itself instead

 

 

 

 

Give it a try, share your results, and we'll be glad to help you further with this.

 

Cheers,

Paul

[Narendra Verma]

@akapowl, Thanks for reply, Let me watch this video.