Jump to content
GreenSock

paraxx

Problem with fixed background with GSAP and ScrollMagic

Go to solution Solved by paraxx,

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 am building a site with ScrollMagic and GSAP but i have started to experience a problem with my my video background, which is that the last scene is triggered in the beginning, until i scroll down the first scene which then resets the animation. Whats the reason for this behavior?


Fiddle: https://jsfiddle.net/Lx4m4ehd/6/


Link to comment
Share on other sites

Hi,

 

Sorry to hear that you're experiencing this issue. Unfortunately I haven't worked with ScrollMagic so I can't tell you what could be the issue and we need to focus our time on solving GSAP specific issues, so problems with third party plugins working on top of GSAP are a bit out of our scope.

 

Also I saw you created an issue on SM repository, so you'll have to wait for Jan or other user to provide support. As well perhaps another user here in the forums with more experience with SM could provide some help.

 

Finally, it strikes me as unusual that any instance added to the main timeline created with scroll magic is not paused by default at runtime. Perhaps you could set the tweens to paused and see if that helps.

  • Like 1
Link to comment
Share on other sites

Thank you so much for the reply, and i am aware that this question is a long-shot. Nevertheless i noticed that the github repo for ScrollMagic was somewhat quiet, which gave me the idea of trying here, since i have had some very good experience with friendly people, just like you, replying with a possible resolution for this problem.

 

Its super interesting with the paused parameter, but i am not quite sure where to add. I tried just adding it on the first scene (anchor1) to the to part of the animation, which did not work. If i set the paused to all the tweens it does not move at all.

 

Its probably very important that i explain this is a minimal version based on a very big project, where i am only experiencing the problem with the video background. Everything else is working as it should.

Link to comment
Share on other sites

  • Solution

Yay i fixed it! I removed all the fromTo, except the ones in the beginning and replaced them with to, this literally fixed my problem. I have no clue why..

 

https://jsfiddle.net/Lx4m4ehd/7/

  • Like 2
Link to comment
Share on other sites

Good to know that you solved your issue!!

 

Perhaps you could check SM's documentation and follow on the issue you created in order to get an official explanation.

 

Happy Tweening!!

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