How To Use ScrollTrigger scale texts

[Harishjee]

i need to scale up the h1 and pinned to reveal image on scroll, but i cannot achieve this

any one can help me out this?

here is my codepen

 

See the Pen wvNKQpb by 8124397259 (@8124397259) on CodePen

[mvaneijgen]

Hi @Harishjee welcome to the forum!

 

 

I had to move some things around in your HTML, CSS and JS. I've created a timeline of your animation (seen that you want to animate two things, a timeline is the best use for that) and instead of having a separate ScrollTrigger I've it integrated in the timeline, so now it is one object that controls the whole timeline. 

 

I'm not sure what you want the animation to do, but keep in mind: the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

Check out this tutorial how to work with ScrollTrigger 

 

 

Hope it helps and happy tweening! 

 

 

See the Pen LYqpMpJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[JadeRaymon]

Quote

 the best thing to do when working with ScrollTrigger is to remove it!

Well, everything ingenious is simple. Really just a tip, but it has a lot of meaning, especially when you explore the points made on this site. Thank you!