Search the Community

I'm building a Pomodoro Timer and want to create a draggable div (assigned with a background-image of a 25 minute timescale) to set a timer and on release the div/image will animate back to the starting position. Can I do this with GSAP? Here's my Codepen: https://codepen.io/iamryandnelson/pen/dRbKMM

Hello guys. I created a basic slider plugin using TMtimelinelite, simple use for create animations, please check and evaluate and report bugs. Liver version Thanks!

Hello Everyone! I encountered a problem for which I can not find a solution. I would like to make the transition from one slide to another, something very similar to CSS clip. The problem is that I need a diagonal bar to sweep the screen from right to the left, showing the content that lies beneath. Does anyone have any idea on how to achieve that? I have attached a picture that might explain a little bit better what I am trying to do. Any help is very much appreciated!

Hi there, I'm trying to achieve some quite simple animations for my bootstrap carousel slides, but I'm not able to get them rendered at the right moment. What I want to do, is to animate the slides, which are inside its captions, for each slider image when the next image is sliding/ fading into view. Right now, the carousel is set to "pause", so that the slide effect is managed via the carousel indicators or controls. I got to work the animations for the first carousel image with a simple timeline, like so: var tl = new TimelineLite(); tl.from(".tlt", 0.5, { left: 200, autoAlpha: 0 }, "-=0.25") .from(".tlt2", 0.5, { right: 200, autoAlpha: 0 }) .to("hr", 0.5, { width: 800 }) .from(".fa-angle-double-down", 2.5, { top: 0, autoAlpha: 0, ease: Elastic.easeOut }) where .tlt, .tlt2 etc are the headings and sub heaings to animate. The problem arises, when I try to achieve animating the elements of the next slides, which are fading in by manually changing to the next slider image. I don't know how to animate them for the moment the next slider image comes into view. If I continue with the same timeline, the effects already happened before the next image was loaded. So I tried to create a new timeline, but it's the same problem. I've heard that there is the possibility to add a Label, but only could change the animation delayed in time, not when the new slide comes into view. So, finally I resort to a little, somewhat anarchical trick with an "onClick" function for each indicator. Like so: <li onclick="myFunction2()" data-target="#carousel-example-generic" data-slide-to="1"></li> and: function myFunction2() { var tl2 = new TimelineLite(); tl2.from("#it-h4", 0.5, { left:200, autoAlpha:0, delay:0.8 }) .from("#it-p", 0.5, { right: 200, autoAlpha: 0 }); } Sure, this is not the finest solution and it only works because of the carousel indicators. So what if I want to set the carousel to fading automatically, setting an interval? Does GSAP have any solution for this issue? Couldn't find any related post. Best regards, Pete

What tool I can use to create something like this http://www.buildinamsterdam.com? I checked the website and its made in Green Sock. The slide is easy to create but the deep linking is hard, it also using Wordpress.

Helly everybody, I was hoping someone out there might be able to provide some info on applying the greensock throwprops plugin to a vertical scrolling nav menu for an android app. I have tried modifying the code from the throwprops page, but it uses a textfield, i want buttons inside a movie clip... Is that even possible? Can anybody point out any useful tuts or articles? or would someone like to view the file? Thanks a bunch everybody, Alex

Hi all, First of all can I just say how amazing this engine is to use! I've only been using it half a day and I have to say it is really amazing. My boss introduced me to it as he uses greensock for actionscript, and seeing as I am no flash programmer, he asked me to talk a look at the javascript version and its amazing My question is probably more a javascript question rather than a question about the actual engine files.. I have 2 divs (but want to add more), the first one called firstSlide and the second one secondSlide and what I want to do is once the animations are complete on the first slide, I want to add a delay of 5 seconds and then transition out the first slide and then show the second. Could someone please point me in the right direct of how I could do this please? Thanks in advance!