Jump to content
GreenSock

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

.staggerFrom a .class made from an SVG group

Go to solution Solved by Dipscom,

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'm trying to make this:

See the Pen MbjEZX?editors=1000 by Ryan84 (@Ryan84) on CodePen

 

but instead of using .st1 and .st2 in the .staggerFrom I would like to combine these into one class called .SET1

.st1 and .st2 are in a group and I have added a class to this  <g id="SET1" class="SET1"> 

 

the .staggerFrom doesnt seem to like .SET1

 

Can anyone see why?

 

Kind regards

 

Ryan 

See the Pen ZBpXbX by Ryan84 (@Ryan84) on CodePen

Link to comment
Share on other sites

  • Solution

It's because you have assigned .SET1 to a single <g> tag and as such it is treated as a single element. In order to achieve what you are proposing, you need to assign the .SET1 class to all elements that you want to affect or write a CSS selector to target the children of .SET1.

 

Something in the lines of: ".SET1 > g" - This will target the first g that is a direct child of any element that has the class ".SET1".

  • Like 3
Link to comment
Share on other sites

Thanks for the advise Dipscom. Are you saying to change the .ST1 and .ST2 to .SET1?

I was hoping to avoid this as I have 6 number groups each containing the more than 12 .ST2 .ST1.... for efficiency I was wondering if it is possible to leave these as they are and Target the group they are in.

 

You mentioned "a CSS selector to target the children of .SET1."  is this different from manually changing every layer to SET1?

 

Thanks for the help..really appreciate it

Link to comment
Share on other sites

Sorry Dipscom, just worked this out. Thank you for you help. Just adding >g to the Class in the timeline worked a treat.

 

See the Pen ZBpXbX by Ryan84 (@Ryan84) on CodePen

 

Thank you

  • Like 1
Link to comment
Share on other sites

Hey, sorry was offline. Glad you worked it out in the end.

 

:)

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