Juc1

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

@ Zach thanks a lot ?

@ Zach for the second one = https://codepen.io/Juc1/pen/LYEPxKv I want each click to play and reverse the timeline = click 1 play and reverse timeline, click 2 play and reverse timeline etc . It works fine on the first click but how do I say run the timeline again (play and reverse) for each click ?

@ Zach awesome thanks ? Could you please look at my codepen #2 in my first post (similar but different) ?

Hi all, Any ideas please what I am missing ? ? codepen # 1 I want each click to alternate between - click 1 play the timeline, click 2 reverse the timeline, click 3 play the timeline etc. It is close except that the first click does nothing. https://codepen.io/Juc1/pen/eYYaLwd ======================================================================= codepen #2 I want each click to play and reverse the timeline = click 1 play and reverse timeline, click 2 play and reverse timeline etc . It works fine on the first click but further clicks do nothing. https://codepen.io/Juc1/pen/LYEPxKv Thanks...