nolimit966

This has been super helpful! I have just managed to finish building a infinite carousel which auto scrolls when you navigate left and right using ScrollMagic + GSAP. https://codepen.io/nolimit966/pen/zgBxwO Still a little tidying up to do but you get the jist of it

This is really interesting. How would you revise the above so that the animation (in vanilla JS) didn't animate boxWidth at a time? Instead it smooth scrolled similar to the mouseover on: https://codepen.io/nolimit966/pen/OKMYOL

Hi there, We are currently working on a set of animated banners which are wrapped inside a test environment iframe. For QA purposes would it be possible to target the GSAP timeline from the parent iframe to have the control over the animation whilst the banner is being reviewed? This would only be if its on the same server etc. Any insight would be useful Thank you

Hi there, I have a simple tweenMax timeline setup which has a number of headlines which appear and move around on canvas. I am using the html5 'touchstart' functionality to detect if a user has swiped upwards, and if they have then pause the timeline which is currently running. its easy enough to do using mainTl.kill(); which works fine, but if the animation is in the middle of the tween i need that element to finish what it is doing before it pauses. I could write a function which checks if the current element is animating (boolean), then if so keep checking until true becomes false then do something but wanted to know if there was a way in GSAP this could be done. Something along the lines of mainTl.kill() but if the current tween is complete. I have had a search on the forum but theres nothing I can find like this which has been done before. Cheers

Worked perfect that, I added: document.getElementById("mainwrapper").style.display = "none"; to the bottom of the HTML and then used document.getElementById("mainwrapper").style.display = "block"; just after the window.onload function - worked a treat - Thanks

Hi guys, I have been working on some banners over the past few days. I have setup an init() function which positions all of the animated images and text (which looks like this): function initCSS() { TweenLite.set(("#intro"), {y: 380}), TweenLite.set(("#titleHolder"), {x: -200}), TweenLite.set((".t-2"), {x: -200}), TweenLite.set(("#product1"), {x: -200}), TweenLite.set(("#product2"), {x: -200}), TweenLite.set(("#cta"), {x: -200}) } I have the GS stuff in its own JS file and the CSS and html together in the html file. GS is brought in at the top of the HTML file and the external JS GS stuff at the bottom. When the banner is very first loaded all of the stuff which animates above is all out of position and flickers. Its as if the init() is taking a few milliseconds to kick in so its falling back on the standard css for positioning. Text and images are all overlapped etc. What is the best way to prevent this happening? Cheers, Ste