Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Juc1

ShockinglyGreen
  • Content Count

    38
  • Joined

  • Last visited

Community Reputation

1 Newbie

About Juc1

  • Rank
    Advanced Member

Profile Information

  • Gender
    Male
  • Location
    UK
  1. 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 ๐Ÿ‘
  2. @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 ? ๐Ÿ˜€
  3. 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...
  4. Juc1

    SVG slideshow

    Thanks @ Shaun and Craig ๐Ÿ‘
  5. Juc1

    SVG slideshow

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

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

    getElementsByClassName ?

    @ ZachSaucier awesome thank you ๐Ÿ‘
  8. Juc1

    getElementsByClassName ?

    @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?
  9. Juc1

    getElementsByClassName ?

    Yes timeline + querySelectorAll() = perfect, thank you ๐Ÿ‘
  10. Juc1

    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 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 ๐Ÿ˜€
  11. 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...
  12. Juc1

    Click events

    @ Zach thanks a lot ?
  13. Juc1

    Click events

    @ 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 ?
  14. Juc1

    Click events

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

    Click events

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