Jump to content
Search Community

Element disappears after completing Tween

tallwhitey test
Moderator Tag

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 have a test project using Greensock and Edge Animate. Wanting to create a responsive and floating menu at the bottom, I got it working pretty solid.


That is, on everything but mobile Safari. It turns out that when I trigger a tween from either scrolling, or resizing a window (orientation change), the tween works fine until the end when it disappears. Oddly enough, it remains visible when in landcsape mode. 


So curious if any known bugs that would cause this. Here is the link to the site if that helps - http://tappinass.site44.com/newcrowd/newcrowd/newcrowd.html

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Sorry to hear that you're experiencing troubles.


First, unfortunately the link you provided is returning a 404 error, so please take a look at that.


Second, in order to troubleshoot any issues you could be facing Id' suggest to set up a reduced live sample of your code in codepen (the forums first choice) or any other site  like that (jsfiddle, plunkr, jsbin, etc). The reason is because is always simpler and therefore faster to see a reduced part of the code (ideally the one generating the issue). Please take a look at this link:




Finally, the issue is happening on orientation change in other devices as well (Android for example) or you just tested on iOS?.


Happy Tweening!!

  • Like 2
Link to comment
Share on other sites

Ah for some reason its adding a "%C2%A0" to the end of the link. remove that and should work fine.


And when I get back to the computer with the file, i'll try to make a codepen available. Just wasn't sure if it was a conflict with Edge Animate which is why I also wanted to show the full site.



Link to comment
Share on other sites



This is the address my browser is going to:


As you can see no "%C2%A0" is being added.


Please provide a reduced code sample of your issue, this is taking us nowhere. Most importantly you've lost almost an entire day with no support for your issue. Codepen samples help us to better help you.

  • Like 1
Link to comment
Share on other sites

I apologize. I was trying on internet explorer and the link adds those characters. The real issue looks to be the httpS.  Remove the s and that should do the trick. Once again, I'll add the codepen as soon as I'm back to that computer to try and reproduce on there.

Link to comment
Share on other sites

So here is a stripped down version of just the scrolling effect. Im not sure if will reproduce the effect on mobile safari though, but thats at least the javascript code I used for it.


With a few exceptions from calculations I had to make to compensate for Edge's responsive scaling feature.


See the Pen ZGZzWz by anon (@anon) on CodePen

Link to comment
Share on other sites

Hey guys, Anyone able to look at this? (The original link does in fact work now).


I'm ready to upgrade to get SplitText, but if this issue can't be figured out for Safari in IOS, its a moot point. I suspect it has something to do with the address bar resizing in Safari thats causing the item to disappear at the end of the tween.


Any help would be appreciated. 


Link to comment
Share on other sites

Sorry, but we really can't debug your live site. I'd suggest you attempt to debug the following in this snippet

Symbol.bindElementAction(compId, symbolName, "window", "resize", function(sym, e) {
         h = $(window).height();
         w = $(window).width();
         p = w / 640;
         var mover = sym.$("Rectangle3");
         var hh = $(window.top).height();      
         prop = hh/p;      
         TweenLite.to(mover, 1, {y:prop, yPercent:-100, ease:'Bounce.easeOut'});
      //Edge binding end

My guess is that Safari is mis-reporting the values and it is not some weird thing GSAP that hides or moves the element the wrong way.


First, remove TweenLite from that method entirely and use javascript to set the css transform values on that element's style using your prop value and -100% translation.


Does it work as expected?


If not, figure out which values are being mis-reported. Its also worth investigating how often and when the resize is being fired.

  • Like 2
Link to comment
Share on other sites

Hi and sorry, this one slipped through.


Unfortunately I don't have an iOS device so I can't give you a concrete answer beyond what I'm seeing in a simulator (a reliable one though).


I did came through this post in stackoverflow and I believe is worth take a look at it:




What I can tell you about Android is that Firefox 39, Chrome 42 and Opera 30 are having similar issues. The main problem is what happens once the address bar hides due to scrolling and in iOS you have the address at the top and the icon bar at the bottom.


If this feature is completely necessary you'll have to dig into each device and browser to see the window height difference with and without the address bar and act according to it. A possibility is to use the resize event and execute the code only if the height changes (on orientation change the height and width changes) and correct the tween value. In that case if the event is triggered more than once GSAP overwrite manager will cancel any previous tween.


If this is not completely necessary I would create a fixed element and forget about all that feature, but you'll have to weight on it and talk to your client.

  • 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.
  • Create New...