Liam@II

Craig you are a lifesaver!! i was losing my poor little mind

please can you tell me why this animation works perfectly in Chrome and Internet Explorer even, but not in Firefox

Thank you! i forgot about Cycle. thats the first time I've seen the calling of a function from that position (simplified your code ) TweenMax.staggerTo(".thing", 1, {x: 50} }, 0.1, myFunction ) } Can you tell me how that differs from onComplete?

http://codepen.io/Liamii/pen/KNyXNZ/ so all i want to do is... each time the animation repeats the vertical distance tweened is incrementally change by some amount. right now the tweened value doesn't change at all and onRepeat is called for every instance within the stagger. i want it to only be called once per cycle of animation. thanks in advance

ok, so as a quick fix i have animated the opacity. i am still having issues with not being able to use Timeline and even more weirdly i cant use '.from' animations. i have to '.set' the properties and use '.to' animations of else nothing happens ??

Hi heres the codepen link to the banner http://codepen.io/Liamii/pen/b4b4b63c032d04ca3cf428af9f7c18ed i know you normally ask to strip the banner down to its most basic but if truth be told, i would love if someone could look at the code and see if i could make improvements. so my main concern is that the DrawSVG isn't working like it has for me in the past. im applying a blur filter to the SVG and this is causing a opacity "boost" after they have svg line draws on. im using a for loop to loop through an array to give these svg lines certain parameters, but the only way i can get it to work is to use multiple TweenMax. to events instead of a timeline. i have facility in the code to timeLineMax but ive chosen not to. Can someone sugest how i might enable the use of timeline? please can someone take a look at this and offer me any suggestions how best to approach this thanks a million Liam

Hi, sorry i was editing this as you were looking at it. i assumed that because i was using an initial scale of 0, i didnt need to tween the opacity. but i still see the exact same regardless of the edit. the first image below is the font after line 15 is JS is complete. the second image is after line 17 of the JS is complete. im on Mac (El Capitan) Safari 9.1.1

Hi, i have a staggerFrom availing of the characters gotten from SplitText. i have the exact same tween applied to 3 lines. but strangely, after the third line animates in, it gets an immediate opacity boost, which looks awful. any ideas? thanks

il certainly give it a try! and il let you know how i get on update: that worked a treat! thank you

Hi im lookin for some help. i guess this is a JS question and not strictly a GSAP question but hopefully someone can help. var buttons = document.getElementsByClassName("click"); var myFunction1 = function() { TweenMax.to(this, 0.8, {scale:1.1, ease: Elastic.easeOut.config(1, 0.2)}); }; var myFunction2 = function() { TweenMax.to(this, 1, {scale:1, ease: Elastic.easeOut.config(1, 0.2)}); }; var myFunction3 = function(url) { var win = window.open(url, '_blank'); }; for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('mouseover', myFunction1, false); buttons[i].addEventListener('mouseout', myFunction2, false); buttons[i].addEventListener('click', myFunction3, false); } here i create an array (is it actually an array?) or buttons based on the class of .click and i assign 3 event listeners to eacb button. id like to pass in a URL for each button to myFunction3. where would i store these URLs? would i need to lose the code i have and create new code where i create a button object? thanks and i appreciate any help you can offer

thanks guys, il take that onboard. but to answer Rodrigo's question. i have done a simple alert in the text editor and it worked fine

hi im not including the js file for the animation, i wrote everything in the text editor (see below) <button onclick="myFunction()">Try it</button> <script> function myFunction() { var tl= new TimelineMax(); tl.to("#iconWrapper", 0.5, { opacity: 0, ease: Power2.easeInOut }) } </script> so as you can see my interaction is on click. if i wait 10 minutes before clicking, still nothing happens. im enqueuing Tweenmax in the header, no DOM listener. ill make the change as you suggested but do you think based on the fact that the animation is not automatically triggered, the loading times are not the source of my issue?

Hi, one more issue im seeing is when scaling SVG paths. top image is Chrome, bottom is Safari (on Desktop). im seeing a shift in the x position for no apparent reason. i cant send this to client. all content is SVG but the only element im scaling is the infinity logo, im also animating the x and y using relative amounts (+=200) heres the codepen link. the id in question is called #outline http://codepen.io/Liamii/pen/RaQqpP/ has anyone else seen this issue? would anyone have a possible solution?

Awesome response!

http://codepen.io/Liamii/pen/vGWLLr/ this works just as i want in Chrome but none of the rotations happen in Safari Version 9.1. and the scaling of the sprite sheet results in half of it disappearing (alternating between left and right hand side) Can anyone help please