[Run timeline for first instance of class X, then for next instance of class X etc]

7 hours ago, GreenSock said:

It's just a convention. @mvaneijgen linked to the docs that explain what that parameter does. It's totally unrelated to GSAP - it's just the index value of the current loop. So it starts at 0, then 1, then 2, etc. 

So yes, you could totally tap into that in order to place things into a timeline, for example: 

let tl = gsap.timeline();
myArray.forEach((el, i) => {
  tl.to(el, {...}, i * 2); // insert each one 2 seconds apart
});

Technically that could be done using the "stagger" feature in many cases, but sometimes it is useful in a forEach() loop for more complex logic. 

 

ok great thank you 😀

[Run timeline for first instance of class X, then for next instance of class X etc]

2 hours ago, mvaneijgen said:

The first parameter is the element, the second parameter is the index of that particular element, this gets usually shortened to because i is faster to type than index. You can surely leave it out if you don't need it. There is even a third parameter, check out the MDN docs to learn more about the .forEach function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

Hope it helps and happy tweening! 

 

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 😀

[Run timeline for first instance of class X, then for next instance of class X etc]

12 hours ago, GreenSock said:

You mean like this?: 

There are actually many ways to accomplish that. I just figured a .forEach() loop might be the most intuitive and flexible in this case. 

 

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 = 

See the Pen BaVPqew by Juc1 (@Juc1) on CodePen

 

[Run timeline for first instance of class X, then for next instance of class X etc]

4 minutes ago, GreenSock said:

You mean like this?: 

There are actually many ways to accomplish that. I just figured a .forEach() loop might be the most intuitive and flexible in this case. 

 

Yes perfect thank you. 😀

[Run timeline for first instance of class X, then for next instance of class X etc]

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" ?

 

 

See the Pen ZERjyrY by Juc1 (@Juc1) on CodePen

[Draw SVG for uneven stroke width ?]

21 hours ago, PointC said:

Yep - masking is the best choice IMHO. I have a whole tutorial about variable width strokes and calligraphy handwriting. I also cover how to handle it when sections of the letters overlap themselves. 

 

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

 

Great, thanks 👍

[Draw SVG for uneven stroke width ?]

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?

 

 

See the Pen ExXpBax by Juc1 (@Juc1) on CodePen

[SVG Foreach random order]

@tailbreezy perfect thank you 👌

 

Just adding the link to the docs https://greensock.com/docs/v3/GSAP/UtilityMethods/shuffle()

[SVG Foreach random order]

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

See the Pen QWGJNbx by Juc1 (@Juc1) on CodePen

[SVG filter value]

 @ZachSaucier awesome, thank you 👌

[SVG filter value]

Hi all

 

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

 

Thanks...

 

 

See the Pen QWGQXoR by Juc1 (@Juc1) on CodePen

[Scrolltrigger timeline + forEach]

Just adding the link to the relevant pen: 

See the Pen QWNqBvL by GreenSock (@GreenSock) on CodePen

 from 

 

[Scrolltrigger timeline + forEach]

awesome, thanks guys 👌

[Scrolltrigger timeline + forEach]

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... 

See the Pen PobjKPj by Juc1 (@Juc1) on CodePen

[querySelectorAll event play / reverse timeline]

 

15 minutes ago, ZachSaucier said:

That doesn't make much sense in terms of usability... 

 

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 👍

[querySelectorAll event play / reverse timeline]

@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 ? 😀

 

 

[querySelectorAll event play / reverse timeline]

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...
 

See the Pen oNbovWJ by Juc1 (@Juc1) on CodePen

[SVG slideshow]

Thanks @ Shaun and Craig 👍

[SVG slideshow]

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

[SVG slideshow]

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...

See the Pen vYLYdBm by Juc1 (@Juc1) on CodePen

[getElementsByClassName ?]

@ ZachSaucier awesome thank you 👍

[getElementsByClassName ?]

@Craig sorry I missed something out and spoke too soon   Can I please bug you some more....

In my getElementById pen 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

See the Pen NWqypwV by Juc1 (@Juc1) on CodePen

 

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?

[getElementsByClassName ?]

4 hours ago, PointC said:

Is that what you needed?

 

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

[getElementsByClassName ?]

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   ) 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 😀

[getElementsByClassName ?]

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 = 

See the Pen ZEGvyEV by Juc1 (@Juc1) on CodePen

 

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...

 

See the Pen qBdpmOQ by Juc1 (@Juc1) on CodePen