Jump to content
Search Community

Problem targeting ID in SVG

marko krstic 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

Hello @marko krstic and Welcome to the GreenSock Forum!

 

You can also add your selector string right in your tween target, since GSAP uses querySelectorAll() for the target parameter.

 

This way jQuery isnt required, like this:

 

.from("#bottomLogo", 1, {opacity: 0, y: '200%'}, "-=1")

 

from() Docshttps://greensock.com/docs/TimelineMax/from()

 

.from( target, duration, vars, position)

  • target: Object
    Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll().

Happy Tweening! :)

  • Like 2
Link to comment
Share on other sites

Yep, @mikel and @Jonathan are exactly right. Also, I'd strongly recommend using yPercent:200 instead of y:"200%" so that you're very explicit about the effect you want. Technically what you have will work in this case because internally GSAP noticed the % and converts it internally to be yPercent for you, but keep in mind that you can combine "y" and "yPercent", so if you tried doing another tween later to something like y:100, you'd end up with BOTH y:100 AND yPercent:200. It's just safer to be explicit and use the built-in yPercent or xPercent whenever you do percentage-based transforms.

 

Another minor note: your SVG is using a crazy-high amount of precision in the numbers which makes the strings VERY long. If you clean that up so that it uses only one or two decimal places, you'd probably cut the size of your SVG string in less than half kb-wise. Faster loading, and I doubt anyone would ever notice a difference in the visual fidelity. Just a suggestion. 

 

Happy tweening!

  • Like 2
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...