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

Hi, can anyone offer some insight on my post above? do i have to write js in some sort of shorthand or wrap in some tags that WP understands?

i copied this code and pasted into functions.php of my WP theme. i can now see the that TweenMax is loaded into the Header of each page. i have this on my homepage as a test. there is a div called iconWrapper on my homepage. it appears to be so simple but NOTHING happens and im losing the will to live after staring at it for hours <button onclick="myFunction()">Try it</button> <script> function myFunction() { var tl= new TimelineMax(); tl.to("#iconWrapper", 0.5, { opacity: 0, ease: Power2.easeInOut }) } </script>

thank you very much, you saved me from banging my head off the desk

Hi, i have seven timelines each inside a function. created in the same way as shown in the 'GSAP JS Banner Example' six contain content and a seventh to control them all. i can get one timeline to activate (works when i use each of the 6 content timelines) but when i use the .add property to append another timeline at the end of the first. i get nothing surely this has a simple solution. i have tried to replicate the 'GSAP JS Banner Example' as diligently as i can but it just wont work for me. can someone take a look at the code on my codepen link please thanks

Absolutely! thanks a million

thanks Diaco! can you tell em what the addition of the [0] does? and why the [0] isnt needed in the DrawSVG example i referenced earlier? im curious and i think it will help me learn DrawSVG example http://greensock.com/forums/topic/12743-animated-svgs-and-adobe-edge-animate-does-edge-animate-support-gsap-and-svgs/?hl=edge+animate#entry53620

Hi, yes i deleted references to MorphSVG probably unnecessarily because someone got chastised for packaging up plugins in zips, but i was referencing the file locally and yes im sorry in the file that was attached i was using 'rect' instead of a path. i had since spotted that error but to no avail. Plan B it it then. thanks for looking.

sorry to be a pain in the ass Jack, just wondering if you had time to look at the files i attached? if its not achievable, i need to cut my losses and build outside of Edge

thanks il give this a try

only if you've got Club Greensock membership, which i can see you do