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

#70510 Whoo-hoo! I've made it to 1,000 posts. Thanks everyone.

Posted by PointC on Today, 07:37 PM

Hello GreenSock community,
This is my 1,000th post here on the forum so I thought I’d say thank you to all of you. You’re such a fantastic group of friendly, creative people. Your code, questions and demos inspire me every day. I learn just as much by answering questions as I do by asking them so the first thousand has been a wonderful education for me. Thank you all for your participation here in GreenSockLand.
Special thanks to Jack and Carl for letting me hang out and talk through 1,000 posts. You guys rock!
To commemorate the occasion, I made a new little demo. I’ve been having so much fun lately with CustomEase, CustomBounce and CustomWiggle that I thought they should be the focus of the 1,000 post commemorative demo.
Commemorative 1,000 Post Demo:
Speaking of the new CustomWiggle feature - (shameless self-promotion) – if anyone missed my Wiggle World demo, be sure to check it out. It allows you to interactively play with some of the new wiggle settings.
Wiggle World:
Thanks again everyone for my first 1,000 posts. I’m looking forward to another thousand. You’re an awesome community. As always, happy tweening to all.
- Craig
PS If there are any forum lurkers out there who are a little nervous about jumping in, please give it a shot. The GreenSock neighborhood houses a truly special group of people on the web.

#70507 Stretching the SVG to always cover parent div?

Posted by PointC on 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.


#70434 ios bug on rotation

Posted by PointC on 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.


#70432 Animation Start Areas?

Posted by PointC on 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.


#70413 pathDataToBezier Multiple objects on one path/orbit animation

Posted by PointC on 24 February 2017 - 04:05 PM

That article looks very nice too, haven't read that yet.

Glad to hear that works for you. Yeah - that article is excellent. Everyone is aware of the great docs for GSAP, but I think a lot of members may overlook the blog. There are so many good articles, videos and demos in there. I encourage anyone reading this to look through the GreenSock blog when you get a chance. You'll learn a lot.




Happy tweening.


#70412 MorphSVG partial ?

Posted by PointC on 24 February 2017 - 03:57 PM

Thanks for that extra link. Now I think I see what you're going for here.


I think a fromTo() that tweens the progress in a function should work well. At the end of each tween, we'll repeat the function until we reach the maximum mouth movements. Here's what I used:

function morphLoop() {
  if (count < moves) { 
    var open = randomNumber(0.2, 1);
    TweenMax.fromTo(charly, 0.12, {progress:0}, {progress:open, repeat:1, yoyo:true, ease:Sine.easeInOut, onComplete:morphLoop})

Here's a fork of your pen.




Does that help?


Happy tweening.


#70386 pathDataToBezier Multiple objects on one path/orbit animation

Posted by PointC on 24 February 2017 - 03:59 AM

Hi Patryk D&D  :)


Are these all going to be circular orbits? If that's what you need, I don't see any reason to use the pathDataToBezier() method. I think setting svgOrigin to the center of the SVG and tweening the rotation should work well. I've forked your pen and added a class of .planet to those circles that should orbit. I then used a loop to make each of them orbit around the center of the SVG. Right now I'm using the index of each element to create different delays and tween durations for each planet. You can certainly generate those values randomly or pull them from an array too. 




Unless I'm misunderstanding your desired outcome, I think this will be a bit easier to manage. Here's some more info about svgOrigin:




Hopefully that helps.


Happy tweening.


#70382 Callback function in middle of timeline?

Posted by PointC on 24 February 2017 - 12:34 AM

Hi reubenlara :)


Welcome to the GreenSock forum.


You can add a function using the add() method, but it doesn't take parameters. Please use the call() method like this:

// change this
.add(insertBG("01.png",".testcard"), "scene01")

// to this
.call(insertBG, ["01.png",".testcard"], this, "scene01")

That should get you working correctly. Here's some more info about call()




If you have other questions, it's usually best to start a new topic. When you post on the end of a thread that is marked answered your question could get overlooked and we want to get you the best answers possible.


Hopefully that helps.


Happy tweening.


#70378 Disable Mousewheel Events Durring A Tween

Posted by PointC on 23 February 2017 - 10:28 PM

Hi kreendurron :)


In addition to Sir Jonathan's excellent wisdom, you can also look at the isActive() method.




Happy tweening.


#70370 Draw Svg polygon

Posted by PointC on 23 February 2017 - 09:05 PM

For anyone reading this and considering a Club membership - I was just talking to Jack about DrawSVG and he reminded me of some additional benefits of the plugin over the method I listed above.


There are several browser bugs that DrawSVG works around such as:

  • IE calling <path>.getTotalLength() locks the repaint area of the stroke to whatever its current dimensions are on that frame/tic
  • Firefox throws an error if the element isn’t visible and you call getBBox()

Plus DrawSVG works with all shape types (even though <path> is the only one that has a getTotalLength() method).


Bottom line - a brute force approach can work, but the DrawSVG plugin prevents headaches & saves time and we all know time is money, right?


Happy tweening.


#70364 Draw Svg polygon

Posted by PointC on 23 February 2017 - 07:25 PM

ah... I thought you meant erase the line. 


The way you're animating the line will make a reverse a bit tricky. You'd have to animate the strokeDashOffset along with drawing the strokeDashArray to do a reverse. I'd still recommend Club GreenSock and DrawSVG to make your life easier.  ;)


If you aren't able to do that right now, I think you should simply animate the strokeDashOffset instead. This can be done in a few lines and no onUpdate will be needed.

var path = document.querySelector('#yourPath');
var pathLength = path.getTotalLength();
TweenMax.set(path, {strokeDasharray:pathLength});

// forward
TweenMax.fromTo(path, 1, {strokeDashoffset:pathLength}, {strokeDashoffset:0});

// reverse
TweenMax.fromTo(path, 1, {strokeDashoffset:-pathLength}, {strokeDashoffset:0});

That's basically what DrawSVG does under the hood, but it's much easier to drop in start and stop percentages. There's also no need to get all the path lengths and set the dashArray plus it's all done with one line. Hopefully that helps.


Happy tweening.


#70362 MorphSVG partial ?

Posted by PointC on 23 February 2017 - 06:43 PM

Hi Manfred :)


Are you going to be syncing audio with the mouth movement or is this just some random mouth moves while the audio plays?


If it were me, I'd probably cut the tween time in half and add a yoyo with a single repeat to your fromTo() progress tween. That will close the jaw instead of snapping to the next position. That's just my two cents worth though.

.fromTo(charly, 0.5, {progress:0}, {progress:open, yoyo:true, repeat:1})

Adding a repeating tween in the middle of another timeline can be accomplished in a few ways. You could add it to a function and call it when needed, add a position parameter label or use recent(). We had a good thread about infinite animations in timelines here:




Hopefully that helps.


Happy tweening.


#70351 SVG path animations messed up by UI tabs

Posted by PointC on 23 February 2017 - 04:00 PM

@greensock @jonathan it's like you guys know everything. thanks much!

They do know everything, which is why it's actually dangerous having them both replying in the same thread. That kind of brain power concentrated in one place could cause a disruption in space and time.

#70308 Timeline tween duration from point A to point B

Posted by PointC on 22 February 2017 - 11:27 PM

Yeah - you could definitely find out how much time is left in one timeline and then tween the progress of another timeline to match that value.


As I mentioned in your other thread, almost anything is possible with a plan and some creativity. There are some pretty smart people around here that can help when you get stuck. If you could put together a demo, we could start giving you more detailed answers.




#70306 dynamically pause/freeze a function that calls a timeline animation function

Posted by PointC on 22 February 2017 - 11:11 PM

Hi kreativzirkel :)


I'm not sure I followed that scenario correctly, but you can certainly pause a timeline if/when a second one starts. You can then call another function with onComplete when the second one ends. That function can restart the first timeline, trigger a new animation etc. 




I think you'll find that almost anything is possible with a bit of planning and creativity. It's hard to give you specific answers without a demo of the question. If you could put together a CodePen demo, we can get you the best answers. It doesn't have to be anything fancy - just a few divs and tweens to demonstrate the problem/question.




Thanks and happy tweening.