Jump to content


GSAP Tween with Scroll Magic (unsure if the problem is GSAP or SM related)

Go to solution Solved by emilychews,

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

Hi Guys


I have a simple Tween that I'm linking to a scroll magic trigger.  I'm unsure if my problem is GSAP related or Scroll Magic (if it is a SM issue I appreciate this is off topic).  

Basically I have GSAP and the GSAP for SM plugins running (i've copied the stacking order for the scripts into the codepen JS settings to mirror what i have running on the site), and I would like it so when the user scrolls the tween is fired.  What is happening though is the Tween I have loaded into the scroll magic controller if firing on page load.


I've made a really simplified version of the problem here : 


Any help or suggestions would be amazing.  


See the Pen WpYgWe by emilychews (@emilychews) on CodePen

Link to comment
Share on other sites

The problem is twofold: your triggerElement (.menubox) is at position 0 0 ... so it is immediately triggered. Also, its position is fixed, meaning it will not react to the scroll action (it doesn't move within it's scrolled parent).


To illustrate, I've made the menu absolutely positioned and moved it down a bit so that it will scroll up and trigger the action.


See the Pen aJQPvd by sgorneau (@sgorneau) on CodePen


But, depending on the complexity of your project, this is a specific instance where I wouldn't even rely on scroll magic ... I would simply poll the distance the page has scrolled and, based on min/max parameters, animate the menu in and out at those defined parameters.

  • Like 4
Link to comment
Share on other sites

Also to add to Shauns great advice you should include the ScrollMagic indicators JS script so you can see at what point your scroll gets triggered


To use plugins like the indicators visualization, simply include them additionally to the main library:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js"></script>

Please see Scroll Magic docs: https://github.com/janpaepke/ScrollMagic



  • Like 1
Link to comment
Share on other sites

  • Solution
*** AMENDED - i found out what was causing the secondary problem after removing scroll magic




Thanks Shaun - although I am using Scroll Magic on the site for other things, I took Scroll Magic off this tween as you recommended and have used scrollTop() instead with jQuery, (this also means i can use position: fixed without any problems).


I seem to have a hit what looks like a minor (but two hours later) albeit painfully frustrating side-effect. 


I have it so when you scroll further than 1px down the menu slides away, and when the scrollTop() === 0 the menu comes back in.  There seems to be a strange delay on the menu coming back in though.  I've tried restructuring the else if statement into separate functions, but to no avail? Sometimes if feels like 2-3 seconds.


How can i have it so the menu comes straight back in when a user goes back to the top, without the delay / lag.


I really appreciate yours and Jonathan's assistance so far.


I've updated the Codepen here :

See the Pen WpYgWe?editors=1010 by emilychews (@emilychews) 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.