Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sanjana

Scroll Down Animation

Recommended Posts

I am trying to animate the image if scroll down near to the top or offset 50 on  gallery div

let img = gsap.timeline();
img.to('.gallery img', { duration: 0.5, opacity: 0,   scale: 0.8, translateY: 50, transformOrigin: 'center center', });
img.to('.gallery img', { duration: 0.5, opacity: 1,   scale: 1, translateY: 0, transformOrigin: 'center center', });
img.play();
<div class='gallery'>
  <h1>Scroll down offset GSAP animation</h1>
  <div class='content'>
    <img src="https://images.unsplash.com/photo-1466695108335-44674aa2058b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80" alt="">
  </div>
</div>

 

See the Pen vYLmPPV by sanjuu01 (@sanjuu01) on CodePen

Link to comment
Share on other sites

Hi thanks for responding @Nekiy2

In your  codepen demo its animating like fade-in & fade-out its working not properly. TranslateY and scale animation is not working

See the Pen NWxjmoj?editors=1010 by -greg- (@-greg-) on CodePen

Link to comment
Share on other sites

Thank you! @Nekiy2 its working 😄

but how to add scroll trigger  each image, I added one more image but scroll trigger is working only 1st image

See the Pen vYLmPPV by sanjuu01 (@sanjuu01) on CodePen

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×