Jump to content
Search Community

reverse animation (background color change) with # tag in url

mjtpage test

By mjtpage
in GSAP

Moderator Tag
 Share
Go to solution Solved by Carl,

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

mjtpage test

mjtpage

Posted
Posted

First of all: I LOVE GSAP! And my clients love it. You've created an amazing product here, THANK YOU!

 

I'm struggling with one issue.

 

I'm using ScrollMagic to trigger animations on various parts of the page. One of these is changing the <body> background color -- so the page starts off with a white background, half way down it switches to dark grey, then a little later back to white. It's a cool effect!

 

I'm changing the color from light to dark like this

 

new ScrollMagic.Scene({triggerElement: "#home-5"})
.setTween(TweenMax.to(["body"], 1, {backgroundColor: "#222"}))
.addTo(controller1);
 
Then a little further down, I'm changing it back from dark to light like this:
 
new ScrollMagic.Scene({triggerElement: "#home-10"})
.setTween(TweenMax.to(["body"], 1, {backgroundColor: "#fff"}))
.addTo(controller1);
 

It's working perfectly when I load the page normally. I can scroll up and down, it changes exactly where it should.

 

But... when I'm on another page and click on a link to jump to a specific section low down on the home page (like example.com#home-11, that is below the initial #home-5 section that changes it from light to dark), it does not work when I scroll back up the page.

 

I hope this makes sense!

 

Any ideas what I need to do to make both events work, even when I'm landing on the page lower down than the ScrollMagic trigger elements?

 

Thanks for your help!

Link to comment
Share on other sites
  • Solution
Carl test

Carl

Posted
  • Solution
Posted

Hi and welcome to the GreenSock forums,

 

This really sounds like a question the ScrollMagic authors / community would be better suited to answer.

I don't use ScrollMagic at all, but from the docs I'm guessing the update() method might help http://scrollmagic.io/docs/ScrollMagic.Scene.html#update

 

You may have to write some custom code that detects if a #jumpLink is in the URL and then run some custom code like using our ScrollToPlugin to scroll to that section. Just guesses. I promise if you have GSAP related questions I'll be able to do a much better job of helping :)

  • Like 3
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...