Re-using animation multiple times on a page

[reidb 3 Likes (Newbie)]

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

[Shaun Gorneau 1,503 Likes (Superhero)]

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

[PointC 8,599 Likes (Superhero)]

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.

[reidb 3 Likes (Newbie)]

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!