Sanjana Posted June 24, 2020 Share Posted June 24, 2020 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 More sharing options...
_Greg _ Posted June 24, 2020 Share Posted June 24, 2020 Hi! If i understand you, check my pen, is that you want? See the Pen NWxjmoj?editors=1010 by -greg- (@-greg-) on CodePen Try to use ScrollTrigger, not ScrollMagic, and you don't need use jQuery 2 Link to comment Share on other sites More sharing options...
Sanjana Posted June 24, 2020 Author Share Posted June 24, 2020 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 More sharing options...
_Greg _ Posted June 24, 2020 Share Posted June 24, 2020 @Sanjana I update demo. i think better use fromTo and y, not translateY See the Pen NWxjmoj?editors=0010 by -greg- (@-greg-) on CodePen 2 Link to comment Share on other sites More sharing options...
Sanjana Posted June 24, 2020 Author Share Posted June 24, 2020 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 1 Link to comment Share on other sites More sharing options...
_Greg _ Posted June 24, 2020 Share Posted June 24, 2020 @Sanjana Like this? See the Pen OJMgLJW by -greg- (@-greg-) on CodePen You can find alot of demos on official plugin page https://greensock.com/docs/v3/Plugins/ScrollTrigger#demos 3 Link to comment Share on other sites More sharing options...
Sanjana Posted June 24, 2020 Author Share Posted June 24, 2020 yes @Nekiy2 thank you very much for responding! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now