Jump to content


play animation after reaching to the Anchor

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm desingin the web site that it's structure is like scrollmagic.


what do i have to do to make the  tweenmax animation codes play when it arrives at anchor(#sample)?



Link to comment
Share on other sites

HI milika :)


Welcome to the GreenSock forum. 


I'm not 100% sure I understand your question. Are you saying you want ScrollMagic functionality without using ScrollMagic? If that's the question, you'll want to take a look at this post by Blake:




The demo in that post is really cool and shows you some great techniques. We also had another lengthy thread about not using ScrollMagic that may be helpful:




Hopefully that gets you started.


Happy tweening.


  • Like 3
Link to comment
Share on other sites

tnx PointC


I meant that i want this code

var photo = document.getElementById("photo");
TweenMax.to(photo, 2, {width:"200px", height:"150px"}); 

to work when the Scroll arrives at this ID

<div id="example">  </div>
Link to comment
Share on other sites

Hi Milika,


It sounds like you are describing the exact situation ScrollMagic was designed to solve. I think if you went through the most basic ScrollMagic example or watched Petr's free course: https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/ you would have your answer very quickly.


Otherwise you will need to write your own JS to:


  • find the element with ID of photo
  • measure its vertical position relative to the window
  • create an event listener to respond to scroll events that will check to see if you scrolled far enough


jQuery waypoints is another tool that handles this sort of thing too: http://imakewebthings.com/waypoints/

  • Like 2
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.