Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?


Member Since 18 Jun 2013
Offline Last Active Today, 09:40 PM

Posts I've Made

In Topic: Ways to animate back to initial value?

Today, 09:40 PM

Just to add my two cents worth to Jonathan and Pedro's advice: you may also find the _gsTransform object useful for what you're doing. From the docs:

  • All transforms are cached in a _gsTransform object attached to the element, so you can tween individual properties without worrying that they'll be lost. You don't need to define all of the transform properties on every tween - only the ones you want to animate. You can read the transform-related values anytime, like element._gsTransform.scaleX. If you'd like to clear those values (including the transform applied to the inline style of the element), you can do TweenLite.set(element, {clearProps:"transform"});. If you'd like to force GSAP to re-parse the transform data from the css (rather than use the data it had recorded from previous tweens), you can pass parseTransform:true into the config object.

Happy tweening.


In Topic: Fade Image Sequence with Scroll Magic and GSAP

Today, 09:27 PM

Hi Roli  :)


You can make this happen with one tween. I left all three images in the HTML so they'll be stacked on top of each other. I added a class of .fadeIn to the two on top of the stack. I then set that class to autoAlpha:0 to only show the first pic. The rest is handled by one staggerTo() tween which animates the autoAlpha of the .fadeIn class to 1. You'll see that this works well, but the 3rd picture is a different size than the first two so you can see the bottom part of picture two at smaller screen sizes. If all three pictures were the same size, it would work fine for you at all sizes.

// this is all you need
TweenMax.set(".fadeIn", {autoAlpha:0});
var tween = TweenMax.staggerTo(".fadeIn", 1, {autoAlpha:1}, 1);

Here's a fork of your pen.




Hopefully that helps.


Happy tweening.


In Topic: Stretching the SVG to always cover parent div?

Today, 07:20 PM

Hi 335  :)


As Carl mentioned, we have to keep the support on GSAP here. That being said, I don't mind answering some small SVG questions here and there, but reduced demos are always best.


It sounds like you're trying to fill the screen width and height with your SVG no matter the window size. This can be done and what you're looking for is called preserveAspectRatio = "none". I'd caution though that your SVG will start to look stretched if you allow that to happen.


Here's a basic demo showing how odd things can look. Try changing the screen size and watch how strange the SVG can start to look if the aspect ratio gets too far from normal.




Here's some more reading about preserveAspectRatio




Happy tweening.


In Topic: ios bug on rotation

24 February 2017 - 09:28 PM

Looks like Carl may be working on answer, but I'll sneak in here quickly. Have you tried using svgOrigin instead of transformOrigin on your group? Please give this a try on your city group:

TweenMax.to('#city', 30, {rotation:"-=360_cw", svgOrigin: '188.78 188.96', ease:Linear.easeNone, repeat:-1});

Hopefully that helps.


Happy tweening.


In Topic: Animation Start Areas?

24 February 2017 - 08:49 PM

Hi codi :)


I'm not 100% sure what you're asking, but here are the scripts that site is loading.

<script type="text/javascript" src="node_modules/pixi.js/bin/pixi.min.js"></script>
<script type="text/javascript" src="node_modules/three/build/three.min.js"></script>
<script type="text/javascript" src="node_modules/gsap/src/minified/TweenMax.min.js"></script>
<script type="text/javascript" src="node_modules/gsap/src/minified/plugins/EndArrayPlugin.min.js"></script>
<script type="text/javascript" src="node_modules/preloadjs/0.6.1/preloadjs.min.js"></script>
<script type="text/javascript" src="node_modules/hammerjs/hammer.min.js"></script>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/jquery-mousewheel/jquery.mousewheel.js"></script>

In addition to GSAP, it looks like the bulk of the work is being done by PIxi and Three.js. When you find something you like, you can hit CTRL +U and see the source code. From there you can usually find which scripts are being loaded.


Is that what you meant?


Happy tweening.