[SVG translate elements from svg coordinates]

Great, thanks! 

 

So that works if I rebuild the scene using multiple svgs / elements, which will work for some things 

 

However one of the SVGs I need to animate has lots going on so it won't really be possible to recreate it like this

 

So the technique of css absolute positioning won't affect anything inside the SVG

 

So my main issue seems to be: How to center / set absolute coordinates of the svg elements inside the svg using GSAP?

 

 

Is there a simple way to do this, I'm thinking due to the nature of SVG maybe there isn't..?

 

If that's the case I can just manually pass in the correct relative x,y values needed, or make some changes to the svg file itself

?

 

My not-working codepen below

See the Pen OoQLpW by bananafarma00 (@bananafarma00) on CodePen

 

[Scramble Text using existing content of div]

When I did this on an SVG ( haven't tried with HTML ) using stagger, it used the content of the first text element for all of them

 

So I had to change this 

tl.staggerTo($totals, 2, { scrambleText: { chars: "0123456789", ease: Linear.easeNone}}, 0.2, "label");

 

to this 

$totals.each(function(i, el){
    tl.to(el, 2, { scrambleText: { chars: "0123456789", ease: Linear.easeNone}}, "label+=" + i*0.2);
})

 

 

[Scramble Text using existing content of div]

Cool!

 

FYI, docs still say 'text' is required and doesn't mention this default behaviour 

 

https://greensock.com/ScrambleTextPlugin 

 

?

[SVG translate elements from svg coordinates]

Hi, I have researched and tried various things but can't work out if there is a way to translate svg elements from 'absolute' coordinates?

 

i.e. translate a bunch of svg elements all starting from the center, and finishing at their actual position

 

So in the codepen, I would like to tween all the chickens from the black box to their actual positions ( on the black lines ) 

 

Currently, I put in the x,y value of the black box to tween from, but the chickens use this as a relative x,y

 

I could work out the correct relative x,y value to tween from, but in the real project there are many elements that may change slightly 

 

Am I missing something obvious?

 

Thanks

 

See the Pen wEpZEM by bananafarma00 (@bananafarma00) on CodePen

[Responsive tween variables - className caching]

Great, I think I'll start with trying the modifier plugin method, as I have other more complex animations that may need this approach.

 

Also the other method of creating a new tween at the same progress(), I'd have to get my head around how this would work with Scrollmagic scenes. I assume I would have to also destroy and re-create the scrollmagic scene and re-add the timeline. But don't know if there's a way to add an in progress tween... So using modifiers is sounding a bit nicer at the moment..

 

I just worked out what I was doing wrong with modifiers method, I was doing this, which was making it jump to the values

 

tl.to($logo, 0.8, {scale: 0.6, y: 1, modifiers: { y: function(y){return $(window).width() >= 1000 ? -10 : 40}}, repeat: -1, yoyo: true }, "start");

 

I needed to do this to make it tween properly

 

tl.to($logo, 0.8, {scale: 0.6, y: 1, modifiers: { y: function(y){return $(window).width() >= 1000 ? y * -10 : y * 40}}, repeat: -1, yoyo: true }, "start");

 

Here's the working Codepen  

See the Pen YOXPEr?editors=1111 by bananafarma00 (@bananafarma00) on CodePen

 

 

CSS vars thing looks cool, unfortunately my project needs to work in IE11 too so will have to think about that one

 

Great info, Cheers!!! 

 

[Responsive tween variables - className caching]

Hi! I'm a little stuck on a little issue ? 

 

I am trying to make a simple responsive variable in a tween. At different screen sizes, the box needs to move up by varying amounts ( does not work with yPercent )

 

It was suggested somewhere on this forum that className would work for this, but the css values seem to 'cache' to whatever rules applied at the screen size on page load. i.e. On the codepen the red box should move to the top of the grey bar, and < 1000px turn black, > 1000px turn green.  

It does this if you run the pen at either size, but if you resize live the initial css value is always used.

 

Is there an easy way around this? Or a simpler method? 

 

I also tried using modifier plugin, as suggested elsewhere, but had similar results ( I couldn't find the modifiers plugin js link to make another  codepen, commented out in my demo )

 

I'm guessing some sort of destroy / rebuild the timeline on resize would do the trick, but would be nice if I didn't have to do that? ( maybe not relevant but I am attaching it to a scrollmagic scene, which triggers the shrink / expand nav logo on scroll )

 

Cheers Greensock you're awesome!

 

 

 

 

See the Pen VGYqzz by bananafarma00 (@bananafarma00) on CodePen