ScrollTrigger image zoom in animation

[Sukru]

Hello, i want to move the animation in the codepen link with the scrolltrigger on scroll, can you help?

See the Pen jOagBpB by sukruemanet (@sukruemanet) on CodePen

[mvaneijgen]

Hey, is something like this what you're looking for?

 

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

 

I've wrapped your animation in a scrollTrigger.batch to add a trigger on each element. You can play with the start and end positions to have it start earlier or later when scrolling. That is what the markers are for. Take a look at the docs if you want to learn more https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

you can also add the following css to `.img_container` and then set `autoAlpha: 0` to the first animation to make them hidden at page load and only show them when animating

 

// css
.img_container{ visibility: hidden; }

// js
tl.from(batch, {y: 100, duration: 1, ease: "power2.outIn", autoAlpha: 0})