Juc1

ok great thank you ?

Ok thanks I was just wondering if the index parameter was needed / doing anything in Jack's codepen. If anyone knows a gsap foreach codepen which uses the index parameter please tell me because I would be interested to see what it can do ?

A question please about your codepen newyork.forEach((el, i) => { Is the second parameter i needed - what work is it doing? It seems to work fine without the second parameter = https://codepen.io/Juc1/pen/BaVPqew

Yes perfect thank you. ?

Hi all in my codepen the timeline runs and reverses for all cases of ".newyork" at the same time. Instead of this can anyone please show me how to say run and reverse the timeline for just the first instance of ".newyork", then when that is done, run and reverse the timeline for just the second instance of ".newyork" - and so on for each instance of ".newyork" ?

Great, thanks ?

Hi all, In my codepen I am using drawsvg to draw the stroke which has stroke-width:18px - but how would I do this for an uneven stroke something like the Canva logo below? I am not asking can drawsvg draw uneven widths? - I think the answer is no - so I am asking is there some workaround or different approach for this. If i draw the letters with strokes then I can use drawsvg but I am stuck with a fixed stroke-width. If I draw the letters with fills / shapes instead of strokes then I can have the variation in width but I can't use drawsvg. I guess I could use drawsvg and apply masks to thin sections of the stroke but is there a better way with or without drawsvg?

@tailbreezy perfect thank you ? Just adding the link to the docs https://greensock.com/docs/v3/GSAP/UtilityMethods/shuffle()

Hi all, My SVG flower classes animate in the order given by the HTML = pink, blue, red, purple - can anyone please tell me how I could say - animate in a random order each time the page is loaded eg blue first, next time red first etc

@ZachSaucier awesome, thank you ?

Hi all In my pen I have an SVG filter with a value of 90 - can this value be targeted / animated? Thanks...

Just adding the link to the relevant pen: https://codepen.io/GreenSock/pen/QWNqBvL from

awesome, thanks guys ?

Hi all, I want to say: when image 1 enters the viewport, run the timeline on image 1 when image 2 enters the viewport, run the timeline on image 2 etc But so far I am getting - when image 1 enters the viewport, run the timeline on all the images at the same time. Can anyone please correct my pen? Thanks...

My pen is simplified in order to ask the question so hopefully it would make more sense with the background details. But anyway thanks a lot for your help ?

@Zach thanks a lot. I will read your article in depth thank you ? but for now your pen does "reverse the timeline on mouseleave" but in my question it was not reverse timeline on mouseleave but reverse timeline on next mouseenter = first mouseenter - play the timeline (mouseleave does nothing) second mouseenter - reverse the timeline (mouseleave does nothing) third mouseenter - play the timeline (mouseleave does nothing) fourth mouseenter - reverse the timeline (mouseleave does nothing) etc (ie alternating between one mouseenter and the next) Could you please adjust your example pen ? ?

Hi all Can anyone please correct my pen - I want to say "with the first mouseenter on any red box, play the timeline" (which reveals the green box) With the next mousenter on any red box, reverse the timeline With the next mousenter on any red box, play the timeline etc ie mouseenter event alternates between play and reverse the timeline Thanks...

Thanks @ Shaun and Craig ?

@ Shaun your results works fine thank you but can I do it without jQuery?

Hi all, In my slideshow I want slide # 1 to load on page load, then slide # 2 to cover slide #1, then slide # 3 to cover slide #2, then slide #1 to cover slide #3 then a smooth restart. Can anyone please correct my codepen? Thanks...

@ ZachSaucier awesome thank you ?

@Craig sorry I missed something out and spoke too soon Can I please bug you some more.... In my getElementById pen https://codepen.io/Juc1/pen/qBdpmOQ the mouseover event on the box div triggers the timeline which animates other objects individually within the same svg: tl1.to(".mytitle", {duration:.5, fill:"lime"}); tl1.to(".rectangle-big", {duration:.5, opacity:0}); tl1.to(".myimage", {duration:.5, rotation:20}); tl1.to(".rectangle-small", {duration:.5, rotation:-20}); So my aim is to do the same thing when there are multiple boxes on the same page. With your querySelectorAll code https://codepen.io/Juc1/pen/NWqypwV 1. mouseover / mouseout event targets the box class 2. the box class event fires the timeline 3. the timeline (eg rotation) acts on all parts of the svg together Could you please adjust the querySelectorAll pen so that after box class event, the timeline targets individual objects within the same svg?

Yes timeline + querySelectorAll() = perfect, thank you ?

Thanks to all for replies. ? My javascript skills are currently suboptimal so can anyone please show me a pen using play / reverse timeline (as used in my getElementById pen https://codepen.io/Juc1/pen/qBdpmOQ ) and querySelectorAll ? I know I don't need a timeline for just opacity but this is just a simplified example and I will be adding more cool stuff to the timeline ?

Hi all, My single square codepen works fine with getElementById targeting #top Can anyone please tell me the syntax to do the same thing (run timeline on mouseover) but with multiple targets on the same page = https://codepen.io/Juc1/pen/ZEGvyEV Perhaps using .top and getElementsByClassName ? ie aim is hover on the red layer = fade the red layer hover on the yellow layer = fade the yellow layer etc Thanks...