Jump to content


superscrollarama plus tween max after animating with manu are scrambled

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 make a paralax site with superscrollarama. So the problem is that when you play with the menu it scramble for some reason the scroll animations. If you just scroll it has no problem but when you play with the right control path it make strange things... I don't know what is going on in there. Here is the example : http://ag.sitetester.biz/
I think that the tween max is the problem he does not know the past values...

Link to comment
Share on other sites

Hello GeorgeGeorgiev, and Welcome to the GreenSock Forum!


I tried to go to your link but i got a blank white page with text displaying that the server was not found.


You might want to check out the superscrollarama on GIT to submit an issue. I don't believe TweenMax to be the issue without knowing what your code looks like.

  • What does your TweenMax code look like?
  • Are you using TweenMax to set the initial values?
  • What type of tweens are you using?

Here is a nice video tut by GreenSock on How to create a codepen demo example.


If you setup a limited codepen example, just showing the behavior you describe ... it can go a long way to see what might be going on.



  • Like 1
Link to comment
Share on other sites

Can you see it now? :) The code is more complex so if i post it without all the things it will not make sense to anyone... :) 

Link to comment
Share on other sites

I tried the link above and it still web page not found.


Even if you did make a up a reduced example in codepen.. it doesn't have to have all your elements just a limited example to see the behavior.


When you say strange things.. do you mean that its animating but the animation is choppy?


What CSS properties are you animating? If you are animating CSS transforms or opacity, you can try setting force3D:true to your tweens to force hardware acceleration for a smoother animation.


force3D is part of the CSSPlugin.


force3D - when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d() instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.



Link to comment
Share on other sites

Hum yes i agree but the case is very complex... You need to open it in a diffrent browser. The problem is that if you play with the scroll it makes the start values totaly diffrent from what they are...

Link to comment
Share on other sites

Ok i was trying to view in Firefox 31 on Windows 7 .. looks like the server is found now, but in Firefox it is an empty white page with only a hamburger mobile menu on the top right corner.


.. i had to open your link in Chrome to see fully .. alot is going on so it is hard to see what is causing it..


but instead of a to() tween have you tried a fromTo() tween .. this way you can define your initial tween values with the tween, instead of having GSAP lookup those values to animate from..


Example of a fromTo() tween

// animates from 0 to 100 pixels using x-axis
TweenMax.fromTo("#selector", 1, {x:0}, {x:100});

Also try adding force3D:true to your tween for smoother animation.. as well as using autoAlpha



Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.



Link to comment
Share on other sites

I have try with fromTo but it was the same thing...  I will try to replace all the tweence with from to to se if everything is ok. Thanks !

Link to comment
Share on other sites

Ok cool... Don't forget to use immediateRender:false on your from(), fromTo(), staggerFrom(), and staggerFromTo() tweens since from tweens render immediately by default


Taken from GSAP from Docs:

NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins (often the desired behavior when inserting into TimelineLite or TimelineMax instances).



Link to comment
Share on other sites

its very difficult to properly debug a complex site like that without access to the code.


A few things i noticed


1: you are using a VERY old version of TweenMax from 2013. Please upgrade to the latest version.

2: you are using jquery animate to change scroll position, I'd suggest GSAP's scrollTo plugin.

3: there are A LOT of scroll events firing. For instance I open the console and and scroll the smallest amount possible and 6 identical lines of pixel values show up. Read this thread to see how to throttle or debounce scroll events: http://greensock.com/forums/topic/7205-scrollto-bug-in-182-in-safari-602-mountain-lion/#entry35063


Being that the animation appears to run flawlessly using scrolling, I have to imagine that the timeline values are being recorded and rendered properly. Something in the way you are triggering the scroll via the nav buttons is amiss.


I would further suggest:

Seek some help from the SuperScrollorama folks (visit their github page)

Upgrade to the improved ScrollMagic: http://janpaepke.github.io/ScrollMagic/

  • Like 2
Link to comment
Share on other sites

Jonathan you are all correct.  I have upgrade all the code and everything is the same i spoted what Jonathan talked... The elements inherit visability so it seems like when move with the menu they inherit some visability (and it is done when it jumps from last to first) but when scroll everything is ok. How can bypass this inheritance from the autoAlpha? I have done it with puer opacity. But now i see that when the animation or tween of the menu is made for 10 sek it is ok when i done it for 100 it is mixed.

Link to comment
Share on other sites

Also i think that when it fires so quickly it start two animations. Because i have in diffrent pixels of scroll different animation on this object so i think when it fires so quickly it has some issue...

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.