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?

PointC

Member Since 18 Jun 2013
Offline Last Active Today, 02:34 PM
*****

Posts I've Made

In Topic: Adding Percentage Counter to GSAP Progressbar Animation

Yesterday, 09:50 PM

Hi linx97  :)

 

Welcome to the Greensock forum.

 

You'd want to get the progress() when the tween/timeline updates and that will be a value between 0 and 1. You'd then use that to feed into your percentage counter. I did something quite similar in this demo:

 

http://codepen.io/PointC/pen/pydXLG/

 

Lines 10 and 11 are the timelines that call the changeIt() function onUpdate. On line 30 you'll see how the progress() updates the text. This demo is SVG, but works the same way for regular text.

 

Here's some more info about progress()

https://greensock.co...enMax/progress/

 

If you have other questions, a CodePen demo makes it easier to get you the best answers. Here's some more info about that.

https://greensock.co...a-codepen-demo/

 

Hopefully that helps.

 

Happy tweening and welcome aboard.

:)


In Topic: Bubble effect?

Yesterday, 08:48 PM

I'd take a look at PIXI.js as Jack suggested. The available filters will take care of this for you quite easily.

 

http://www.pixijs.com/

https://pixijs.githu...lacement-map.js

http://www.goodboydi...5/indexAll.html

http://www.goodboydi...js/colorMatrix/

 

Good luck with your project and happy tweening.

:)


In Topic: Timeline Partial Element Reverse

Yesterday, 04:38 PM

You could put the non-reversing tween on its own timeline or just use a single tween and add an onComplete callback to play the main timeline when it's done. Then you can play/reverse the main timeline all you want without affecting the tween that shouldn't reverse.

 

You could also add a label and use an onComplete to tweenTo() the label. In your example, it could be something like this:

var Texte = new TimelineMax({onComplete: goBack});    
Texte
.to(one, 1.5, {opacity:1})
.add("stopHere")
.to(two, 1.5, {opacity:1})
.to(three, 1.5, {opacity:1})
.to(text, 1.5, {opacity:1})
.staggerTo(likes, 1, {opacity:1, yoyo:true, repeat: 1}, 2)
.to('.like:last()', 1, {opacity:1}, "-=1");

function goBack() {
  Texte.tweenTo("stopHere");
}

I'm not sure what your exact needs are for this, but those are just a couple ideas that could work.

 
Hopefully it helps.
 
Happy tweening.
:)

In Topic: Bezier autoRotate Problem - Image not middle centered along path

Yesterday, 04:05 PM

Hi Technics1210 :)

 

Please try this:

TweenLite.set("#car", {xPercent:-50, yPercent:-50});

Happy tweening.

:)


In Topic: Timeline Partial Element Reverse

Yesterday, 03:55 PM

Hi netroid :)

 

I'm not sure I understand the question. Are you reversing the timeline, but you don't want that first tween to reverse? If that's the question, you could simply put that tween off on its own or use a label to control how far the timeline plays in reverse.

 

Could you possibly put that into a CodePen for us and provide a few more details about your question please? 

 

Thanks and happy tweening.

:)