RealMakAttak

Hello Dipscom, Perfect, i actually ended up doing that but with display: none but i suppose it's more performant with visibility: 'hidden' as it won't cause a layout change, so I'll use that. Your help is much appreciated. Thanks.

Will do, appreciate that

Hello Waren, That's great, thank you very much. I ended up using both %'s for the xPercent and relative values (?) for the x and y, eg. '=+10%' and it worked great.

Hello, As per the blog post you suggested, I have used css and GSAP as below - the problem is until the browser gets to the gsap, the image with the css is at top and left 50% and then jumps in to the center when gsap kicks in (the fact it's an image complicates things because I need the image to download to use it's width and height for GSAP)...any ideas on how to get around this, I tried setting the 3d translate in the css, hoping for it to be overwritten when gsap kicks in but it gets taken in to account by GSAP (fair enough). Any advice on how to get around this somewhat janky experience? Many thanks in advance myClass { position:absolute; left:50%; top:50%; } //JS //center all .myClass elements around their origins TweenLite.set(".myClass", {xPercent:-50, yPercent:-50});//handles all vendor prefixes of translateX(-50%) translateY(-50%)

Thanks Dipscom , I'll have a play around and report back with what I find. Appreciate the continued help.

Hello Carl, I made a codepen and it actually worked, the top and bottom li's translated down and up respectively to form the cross, ( well I opened it up on my mobile and it did), I am honestly stumped for why?! https://codepen.io/RealMakAttak/pen/xRqrqQ/ I copied and pasted the code over from my source docs... What could cause something in gsap to work on desktop but not mobile and then in the codepen on mobile?! In that tween: hamburgerLiTimeline.to(hamburgerLiOne, 0.5, { y:"11px", rotation:45}) .to(hamburgerLiThree, 0.5, {y:"-11px", rotation:-45}, 0) .to(hamburgerLiTwo, 0.01, {autoAlpha:0}, 0) .to(hamburgerLi, 0.5, { background:"rgba(215, 35, 255, 1)"}, 0); everything except the y translation is working fine... Any ideas? Thanks UPDATE: I managed ot pin down what it was, I had an onmouseenter animation that was also animating the #hamburger li y: value with GSAP...I have had to disable it for it to work...why is that do you think? Is there any way I could have both?

Hello All, Quick aside, how do a I tag people? I tried @username but doesn't seem to work... Any way, OSUblake's answer was great and I have the scrollmagic controller and gsap timeline variables getting passed in to my onresize function perfectly now. I still cannot achieve my overall goal though and wondered if we might be able to figure this out. I have a parallax site where some full page elements are being y translated by the entire height of the window (thus off the screen) using scrollmagic and gsap. What I would normally do is use y:"-100%" however, for reasons, this is not possible. What I to do instead is grab the height of the window and set the y value to this (achieving the same effect as y:"-100%") for example, "y:-windowHeight". To make these animations responsive, I need to update these absolute tween values with the new windowHeight on resize. What I am trying to do is literally trying to destroy all aspects of scrollmagic and my gsap timelines and rebuild them onresize but it will not work, there seems to be remnants of previous tweens values...I have looked and tried everything to truly "erase" everything but to no avail. Onresize I first destroy the entire scrollmagic controller and then seek(0) and then kill all of my timelines as below: controlla.destroy(true); w.seek(0); x.seek(0); y.seek(0); z.seek(0); w.kill(); x.kill(); y.kill(); z.kill(); Where am I going wrong? Is there a better way to achieve what I need than just "erasing" and rebuilding everything? I'm anticipating problems already when resizing when already scrolled down the page as to where the new values will be preanimated...

@OSUBlake @Dipscom @Jonathan Sorry I didn't reply sooner but have been away from my computer. Thank you so much for helping me with this, really appreciate it, I will try your suggestions and report back. Thanks again

Thanks Jonathan, Note taken. Any ideas on why I cannot seem to get the object defined inside the function?

I read somewhere if you don't put the var it makes it global. I had it there before with the var and again no change, I really can't get my head around it! I'll work on that codepen Thanks for your help

Hello Dipscom, Thank for your reply, I'm not really sure if I could as it's quite complex thing, I know what you mean though. Its basically boils down to the fact that any time I try top access any object inside my windows resize function, it comes back as undefined...I'm not the best javascripter. have I got the scope right? Regarding the declaration of x, not really, I tried it without it and it makes no difference. Thanks, i'll see if I can get a codepen in the meantime

Hello all, Hope you can help, I made a standard timeline to use with scrollmagic. I just want to kill it and use different values for y on window resize so I passed the timeline variable in to the resize function and tried to kill it but it says the timeline is undefined....why is this? Thanks secondtl = new TimelineMax(); secondtl.from(".image-two", 2, {y:window.yTranslateFrom, ease:Power0.easeNone}) .to(".image-container-two", 2, {y:window.yTranslateToOne, ease:Power0.easeNone}) .to(".image-two", 2, {y:window.yTranslateToTwo, ease:Power0.easeNone}, "-=2") var triggerElementOneOuterHeight = $("#explanation-box-one").outerHeight(true); var secondOne = new ScrollMagic.Scene({ triggerElement: "#explanation-box-one", triggerHook: 1, offset: triggerElementOneOuterHeight, duration: "200%" }) .setTween(secondtl) .addIndicators() .addTo(controller); $( window ).resize( function(controller, secondtl){ var x = secondtl.kill(); });

Hello Jack, wondered if you can help please. I tried killing a timeline on resize but I got an error saying the timeline was undefined. Is this a scope problem? How can I get the timeline variable in to my resize function? Thanks

Completely understood Carl, yes that is beneficial. I didn't realise I would get a hardware acceleration effect without translate3d() having a value other than 0 - there must be something else causing the jittering. Thank you very much for your help.

I've been messing around with this and it seems that when you use pixel values, you get the 3dtransform but when you use % values, you get the usual transform. Anyone know why that is?

Hello Forum, Hope someone can help, I've looked everywhere to no avail. I am translating the "y" position below, using a tweenmax timeline within scrollmagic, it works fine but on mobile it looks very jittery. I thought it must be something to do with hardware acceleration now being activated. When looking at the resulting code in developer tools, what I can't under stand is why the actual animation is implemented, inline, like this: element.style { transform: translate(0%, -68.0272%) translate3d(0px, 0px, 0px); } I tried using both a tiny z value, and force3d to try and get the translate3d to animate but neither worked. I didn't even realise it was possible to do both translate and translate3d at the same time. Why is GSAP doing this? How can I change it to just use translate3d? Here is the code below that I am using: var secondtl = new TimelineMax(); secondtl.from(".image-two", 2, {y:'20%', ease:Power0.easeNone}).to(".image-container-two", 2, {y:'-100%', ease:Power0.easeNone}).to(".image-two", 2, {y:'80%', ease:Power0.easeNone}, "-=2"); var triggerElementOneOuterHeight = $("#explanation-box-one").outerHeight(true); var secondOne = new ScrollMagic.Scene({ triggerElement: "#explanation-box-one", triggerHook: 1, offset: triggerElementOneOuterHeight, duration: "200%" }) .setTween(secondtl) .addIndicators() .addTo(controller);

Hello All, I hope you can help, I am making the standard hamburger icon in to an X on click. Here is my timeline: var hamburgerLiTimeline = new TimelineMax(); hamburgerLiTimeline.pause(); hamburgerLiTimeline.to(hamburgerLiOne, 0.5, { y:11, rotation:45}) .to(hamburgerLiThree, 0.5, {y:-11, rotation:-45}, 0) .to(hamburgerLiTwo, 0.01, {autoAlpha:0}, 0) .to(hamburgerLi, 0.5, { background:"rgba(255, 255, 255, 1)"}, 0); This works fine on my desktop browser but when I either go in to device mode on the Chrome browser or actually use the site on a mobile/tablet, the y translation doesn't work, the li's only get rotated... I have been banging my head against the wall for hours trying to figure out why...can anyone help? Many thanks.