Jump to content
Search Community

Help with loop Tween getElementID

phoenixwebb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a for loop that I'm using to morph two complex SVGs. This animation will morph several paths to other paths and return the color of each path. This piece works very well. However, I incorporated a loop for scrolling in leveraging ScrollMagic, and I can no longer seem to get the "fill" property for each of my SVG Paths. You can see the code I am struggling with below the first one. I have commented out the JS lines that are causing my error, it the morphing works correctly, but I can seem to find the "fill" elements for each of my paths so that I can pass them to the MorphSVG. Any help is appreciated and I'm sure this is a Newbie question, so I apologize in advance. 

See the Pen aEKXOv by phoenixwebb (@phoenixwebb) on CodePen

 

with this codepen (below) with the error.

See the Pen aEjLGZ?editors=1111 by phoenixwebb (@phoenixwebb) on CodePen

 

See the Pen aEjLGZ?editors=1111 by phoenixwebb (@phoenixwebb) on CodePen

Link to comment
Share on other sites

Thanks for the demo.

 

It seems you were passing bad strings into document.getElementById()

 

You were passing in something like "#bird" as the SectionC param in sceneHelper(sectionA, sectionB, sectionC).

 

when you called the function

sceneHelper('#section1', '#owl', '#bird');

 

Inside of sceneHelper() you were doing

 

var x = document.getElementById(sectionC + i).style.fill

 

and the sectionC + i expression was evaluating as "#bird1" or "#bird2" etc.

 

You can't pass the # into document.getElementById(), you just want to use "bird", "horse", "lion"

 

I've probably made the same mistake a hundred times. Without changing a bunch of code just use:

 

var x = document.querySelector(sectionC + i).style.fill

 

 

 

See the Pen YYOJEp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

  • Like 6
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.
×
×
  • Create New...