Jump to content
Search Community

Scroll Down Animation

Sanjana test
Moderator Tag

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

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.
×
×
  • Create New...