Element disappears after completing Tween

[tallwhitey]

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

[Rodrigo]

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:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

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

 

Happy Tweening!!

[tallwhitey]

Hi thanks for responding. For some reason the link doesn't work when being directed to it, but works fine if you refresh the page once there.

 

And yes I have tested on Android and it works as expected.

[Jonathan]

I just confirmed and second Rodrigo's above reply. when I go to your link I get a 404 page as well. i tested on Android 5.1. I even tried refreshing the page like you said, but still 404.

 

maybe only your IP can view the link?

[tallwhitey]

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.

 

Thanks.

[Rodrigo]

Hi,

 

This is the address my browser is going to:

https://tappinass.site44.com/newcrowd/newcrowd/newcrowd.html

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.

[tallwhitey]

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.

[tallwhitey]

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

[tallwhitey]

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. 

Thanks.

[Carl]

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.

[Carl]

This might help with replacing the TweenLite code with a CSS transform

 

http://codepen.io/anon/pen/BNeOrQ?editors=101

[Rodrigo]

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:

 

http://stackoverflow.com/questions/24889100/ios-8-removed-minimal-ui-viewport-property-are-there-other-soft-fullscreen

 

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.