Leaderboard

Have nice days everybody. Enjoy! Tweening home for Christmas! ? (I was about to upload a nice Christmas image, but am only allowed to upload 501.76kB (huh?). So use your imagination and think of the nicest picture of somebody on the road, full of snow, with you on the steering wheel, driving home.... uh... on a Greensock tween... so let's make it green snow or something. Well, enjoy! ?‍?‍?

Merry Christmas, @Friebel!

Hi @Vinod, The 'CloudLine' is transformed in your SVG data: "translate (0 -3.44)" and you tween y back to the absolute position of '0' which is lower. Carl takes that into account and sets y back to '-3.44'. Alternatively, you can also move the letters relatively on the y-axis using '- = 10' or '+ = 10' To animate the letters of 'CloudLine', it is helpful if they have the same class name: e.g. 'letter02' And: Your SVG has multiple IDs with the same name. Info ID vs Class ... A wave can be executed with two tweens staggerTo. The last parameter in the second staggerTo positions it, starts it offset to the first: try numbers between 0.2 and 0.3 Happy tweening ... Mikel

i would suggest checking out the docs on staggerTo: https://greensock.com/docs/TimelineLite/staggerTo() It will help you reduce your code. i think for what you are doing you would be just fine playing and reversing the same timeline, but if you want 2 separate timelines I would suggest calling functions that create those timelines when you need them. Having 2 timelines restart() at the same time on the same elements will not work well. Please see this article: https://css-tricks.com/writing-smarter-animation-code/ I didn't spend a lot of time trying to match the timing and all the settings, but this should give you something to start with:

Hi @PinkMeNow, What is your reason to use <symbol> here? Information about <symbol> . You can name this object with the id = "dot" ... Attention: You use the same id 'smalldot' for several objects. Use 'smalldot' as class! More info Happy tweening ... Mikel

Ok, I was waaaaay overthinking this. All I had to do was place the green square (that I'm currently animating) inside a container and animate the container. I set the square to scale x/y maintaining a transformOrigin on the right. The square itself doesn't even know it's being rotated so it works! Here's a fork from the above pen...

Hi, I am having a bit of trouble with this script we have been working on. Trying to get the Pagination to work in sync with the next/prev and auto rotate slider. Here is our script. Any help is appreciated. $(function(){ var $slides = $(".slide"); var currentSlide = 0; var slideDot = 1; var stayTime = 10; var slideTime = 1.3; var numberOfSlides = $slides.length -1; TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'}); TweenLite.delayedCall(stayTime, nextSlide); function nextSlide(){ TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); } $('.go-next').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.go-prev').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = --currentSlide % $slides.length; slideDot = --slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.banner').mouseenter(function() { TweenLite.killDelayedCallsTo(nextSlide); }); $('.banner').mouseleave(function() { TweenLite.delayedCall(stayTime, nextSlide); }); for(i = -1; i < numberOfSlides; i++) { (function() { var slideIndex = i; var slideLabel = i + 1; var x = $('<a id="slide' + slideLabel + '"href="#" class="paginatorLink"><i class="material-icons"></i></a>'); x.click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideLabel, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = slideLabel; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); }); $('.pagination').append(x); })(); } });