Jump to content

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

Re-using animation multiple times on a page

Recommended Posts

Hello!  I'm kind of stuck here and would appreciate any help you can give.


I'm trying to reuse this "squiggle" animation below each <h1> element on my page where the <h1> also acts as the trigger.  I have only been successful by creating unique IDs for each occurrence (i.e. #squiggle-1, #squiggle-2, etc.).  While it works, I'd really like help finding a "DRYer" method as it really bloats my js.  


Thanks again for any help you can give!!

See the Pen mYJBjq by rtboudreau (@rtboudreau) on CodePen

Link to comment
Share on other sites

Hi @reidb,


Unless you have a lot more going on with ScrollMagic ... I would suggest using jQuery Waypoints to trigger the squiggle tween. It's a lot simpler for this use case 


See the Pen zQGPLd?editors=0010 by sgorneau (@sgorneau) on CodePen

  • Like 2
Link to comment
Share on other sites

Welcome to the forum.


Here's a loop to clone the SVG and uses .insertAdjacentElement() to drop a copy after each h1. Then an each() loop to create your ScrollMagic scenes.


See the Pen oRXoGE by PointC (@PointC) on CodePen


Hopefully that helps. Happy tweening.

  • Like 3
Link to comment
Share on other sites

hi @Shaun Gorneau & @PointC,


Thank you both!  These are both far more elegant than what I was working with.  I definitely appreciate the help and education!



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.