Leaderboard

setInterval seems unnecessary because you can listen to event directly. Even that is unnecessary because on play you are listening to tick event and updating everything. GSAP uses requestAnimationFrame so it reduces update calls to 60 per second, that will be best way to go. Also the jQuery UI slider doesn't work on touch screen plus you are not using jQuery, so I think it will be better to go with draggable. In following fork, I have removed many unnecessary calls. If you can't picture what is updating what then writing down will be helpful. But don't worry about it too much even I write unnecessary code many times, just eliminating it simplifies your code. Lastly, for any reason if you feel like you need to use setInterval/setTimeout, I will suggest to go with TweenMax.delayedCall.

It would be great if in cases like this you could reduce your demo so that it only includes the code necessary to replicate the problem. No need for loops and multiple timelines. It just adds an additional layer of complexity. Being that every time I ran your demo it gave different results of showing different images in different places my guess is that your javascript code is running before your images are loaded and thus the engine has nothing to take a height measurement from. Try adding height attribute to your images or waiting until all the images are loaded.

Hello @mannycode and welcome to the GreenSock Forum! Looks like you were missing the jQuery JS and the TweenMax JS. You can add those by going to the JS panel. Click on the Gear icon and use the dropdown in codepen to add a JS library. This video tut by the mighty @Carl can help on how to add JS GSAP to your codepen: Happy Tweening!

Hello @Lovestoned and welcome to the GreenSock Forum! Just to add to the Mighty @Carl and @Sahil great advice and examples! I made some quick optimizations so when you animate it animates each slide using matrix3d() instead of matrix() for a smoother animation, by adding a slight rotation of 0.01. Since i was seeing some jank (lost frames) on windows 10 latest Firefox when animating left or right. As well as adding the CSS transform-style: preserve-3d on the .slide CSS rule elements for cross browser compatibility and preventing some browser bugs. Happy Tweening!

Hi @hisco, Here's a little playing around - because I like coffee and enjoying the slowness ... Enjoy slow food animation ... Mikel

You might want to keep an eye on this one: https://spiritapp.io/ (we aren't directly involved in that, but it looks interesting). We've heard of a few other ones that may be in the works from others, but nothing solid yet.

yep jonathan its great....I implemented your code...its working well another question...is it possible to use throw props with draggable? if yes it would be great... thanks...

Your timeline and draggable were competing against each other to control the same element. I have removed timeline and updated next/prev events. Though there are still issues, like if you click quickly, resize etc. But this should point you in right direction.

Glad you found a fix. Not really sure what you mean by specifying more states, I'm guessing you could draw those states and morph to each one sort of like we do with the hippo demo in the docs: I noticed also you are using a SteppedEase config value of 1.8, you should use integers.

Input type range slider in progress...come soon nice day, gui

just found something that applies to this topic that i thought i would share here. it appears that when tweening a parent element's css variable to tween multiple children, it causes repaints on each child. where doing the same tween on the children themselves can cause no repaints. check out the following jsfiddle example with your dev tool's paint flashing turned on and see the difference between the two: https://jsfiddle.net/k95c51yy/3/ kind of a bummer but oh well.

@Sahil Fantastic!, many many tnxs

Hi @dgu, I am not sure if I interpret your question correctly. Could you represent your intention a little more concrete - preferably with a CodePen: What means 'manually ' for you? best regards Mikel

Got it thanks for that demo. I marked this thread as [solved]

I could not see any flickering either or a line on the side. Pretty cool animations! Tested in Windows 10 in latest Chrome and latest Firefox

@Lovestoned Yes technically you can use ThrowProps with Draggable. But the way it is setup now the drag only allows it to animate a certain distance. You would need to add the GSAP ThrowPropsPlugin (which is a Club GreenSock Membership plugin). Then you will need to add the GSAP ThrowPropsPlugin JS script and then add throwProps: true to the Draggable.create() parameters. But again you would need to change the functions of next and previous to go past their predefined distance of just moving to the next or prev slide. GreenSock allows you to use the GSAP ThrowPropsPlugin JS on codepen so you can play and test with it. But keep in mind that the GSAP ThrowPropsPlugin will only work on codepen and not outside of it.

Thank you, the idea about the code may run before everything is loaded makes really sense. In fact, i've change my code by using a series of promises and looks to works fine now. Thanks!

Ya sure though you no longer need gsTransform because I went ahead and updated demo. Now I am maintaining a variable $target, and using it to calculate end values when responding to clicks. Also updating this variable when you calculate the snap. Check the following demo. On resize I am using set but you can change to a to tween. As for gsTransform, when gsap does any transforms it attaches the gsTransform object to the Dom object. So you can use it to retrieve values only after you animate that element with GSAP. You can console log it to see all the values it sets. Or search in the site and you will find few other threads with detailed info. (On mobile at the moment) UPDATE: @Noturnoo I updated the demo to calculate $target in setProgress function because calculating it in snap was returning incorrect value. Also there are some issues with your set up from start and your slides don't align well but I will let you deal with that. All the best.

Hi @jSwtch, Please take a look at this code: Also try a separate 'pulse' function for the startup animation. And - as an alternative: bind a hover function for the start animation to a container or maybe to window (?). Happy looping ... Mikel

@Sahil Many tnxs for your solution. it is exactly what i was looking for

Ah, I think that may be a node-specific thing that's resolved in the next release which can be previewed (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - is that better?

Thanks for the demo. It seems you were passing bad strings into document.getElementById() You were passing in something like "#bird" as the SectionC param in sceneHelper(sectionA, sectionB, sectionC). when you called the function sceneHelper('#section1', '#owl', '#bird'); Inside of sceneHelper() you were doing var x = document.getElementById(sectionC + i).style.fill and the sectionC + i expression was evaluating as "#bird1" or "#bird2" etc. You can't pass the # into document.getElementById(), you just want to use "bird", "horse", "lion" I've probably made the same mistake a hundred times. Without changing a bunch of code just use: var x = document.querySelector(sectionC + i).style.fill

Demo that fixes fast clicking, Demo with swipe only. I think to take advantage of all features of draggable, it will be a lot better to create a fixed rotating cube and change the images on the fly as it rotates.

There are a few approaches to this. Some require checking the natural height of the element and recording that value by placing a property on the actual DOM element or storing the value in an attribute as shown here: http://codepen.io/aPinix/pen/CubGg?editors=001 The solution I prefer is when expanding the content from its closed to open state do this - temporarily set the height to "auto" - immediately start a tween that animates from height:0 $(".expander").click(function(){ var $this = $(this), $content = $this.find(".content"); if(!$this.hasClass("closed")){ TweenLite.to($content, 0.2, {height:0}) $this.addClass("closed") }else{ //to open // - temporarilty set height:auto // - tween from height:0 TweenLite.set($content, {height:"auto"}) TweenLite.from($content, 0.2, {height:0}) $this.removeClass("closed"); } }) http://codepen.io/GreenSock/pen/Bzhji?editors=001

Hi AncientWarrior Thanx for that , i was thinking in this kind. But how do you make for fixing begin strating points position and min/max values in this logic ?! lets say we need a slider 0 min 100max and a starting position with firstpoint at 55 and second point at 80 guess itsnot so easy ! it take me 12hours to generate my poor try : http://codepen.io/anon/pen/tkbui?editors=101 , but i like this library so i don't givup... i have taken all my afternoon for trying to move cursors slider by clicking.., no way for me at this moment ..lol gui

Hi gui I made a codepen for you , this is just a prototype code , but maybe that can give u a clue .... http://codepen.io/anon/pen/nsyLv hope this helps ...

use an onComplete callback: TweenMax.to(soundChannelBG, 1, {volume:0, onComplete:stoSount}); function stopSound(){ soundChannelBG.stop(); }