Search the Community

codepen.io/benheise/pen/WNmZWpO https://codepen.io/benheise/pen/WNmZWpO Current version: https://unpkg.co/gsap@3/dist/gsap.min.js = GSAP 3.12.5 Does a GSAP3 method/property exist to convert GSDevTools total time to the actual total time? In my workflow GSDevTools helps out in a big way when determining time between frames. The culprit is coming from repeat: -1 in the .fromTo()where total time is 1000 want this time to represent the actual time(screenshot provided) Removing repeat: -1 or creating repeat: # without the negative yes creates actual total time

Hello, please provide an example or a small explanation of how to use GSDevTools in an Angular component . I don't know how to add GSDevTools to a demo project, but I tried to create a minimal component to make it easier for you to help me advise you on how to properly use GSDevTools.create() in an Angular component.

I am of the considered opinion that GSDevTools is one of the best things since sliced corn-bread! However ... I occasionally (and increasingly) miss the ability to manually step forwards and backwards in the timeline. I recognise that GSAP is not frame based, but in this context of stepping - I would love for it to behave as if it was. i.e. Hit the step-forward button (key) and the timeline advances +1/24 of a second. I figure there could be a default notion of 24fps, but that could be overridden with an optional named parameter during tool creation. And maybe even an option to snap to the absolute frame during step (like snap to grid).

When I scroll down, I expect the red block to activate an animation that slides it to the right when `.box` enters the viewport. This works as expected when GSDevtools is disabled. When I add GSDevtools though, it doesn't trigger the animation when you scroll down. For some reason it does trigger the animation (even with GSDevtools) if you are already scrolled down to the red block and refresh the page. Definitely seems like a bug, but maybe there is some workaround setting so I can get back to studying ScrollTrigger. ??

Hi everyone. I have an animation in a simple html working perfectly (three linear color changes of a div, each of a duration of 4 seconds for a total of 12 seconds). In another hand, I have a controling program which load that html into an iframe, and link the animation to GSDevTools. And I have a really hard time to understand why it is working or why it is not. Here is what I tried so far : let iframeTimeline = document.querySelector('#animationHTML').contentWindow.myTimeLine; GSDevTools.create({ animation: iframeTimeline, globalSync: false }); Doing so, I see the animation inside the iframe, but GSDevTools has absolutely no interraction with it, nor does he know its total duration. let iframeTimeline = document.querySelector('#animationHTML').contentWindow.myTimeLine; iframeTimeline.pause(); GSDevTools.create({ animation: iframeTimeline, globalSync: false }); Now, the iframe animation is paused, so at least, in JS, I can interract with it through the iframe. Now, I've read somewhere that, to permit to GSDevTools to manage an animation inside an iframe, one should create a hook timeline like this: let iframeTimeline = document.querySelector('#animationHTML').contentWindow.myTimeLine; iframeTimeline.pause(); let iframeTimelineHook = gsap.timeline({ id: "Decli timeline" }); iframeTimelineHook.to(iframeTimeline, { duration: iframeTimeline.totalDuration() }) GSDevTools.create({ animation: iframeTimelineHook, globalSync: false }); Now, GSDevTools displays the correct total duration of the iframe animation (notice that I feed it with iframeTimelineHook now), but still cannot interract with it. I can move theGSDevTools animation cursor along the 12 seconds of animation, but the iframe animation is still paused. If I remove the "iframeTimeline.pause()" line, the iframe animations runs in parallel of the GSDevTools cursor, but the two are still not linked (if I pause the GSDevTools, the iframe animation continues). To physically make the two linked, I have to write this: let iframeTimeline = document.querySelector('#animationHTML').contentWindow.myTimeLine; iframeTimeline.pause(); let iframeTimelineHook = gsap.timeline({ id: "Decli timeline" }); iframeTimelineHook.to(iframeTimeline, { totalProgress: 1, duration: iframeTimeline.totalDuration() }) GSDevTools.create({ animation: iframeTimelineHook, globalSync: false }); That "totalProgress: 1" is magic. I really don't know what it does internally, but now when I stop/pause GSDevTools, the iframe starts/pauses ! I would be happy with this, but... But now, the animation is a little faster than what it should be. It longs the same time (12 seconds), but in place of making the color changes run 3 x 4 seconds, it's 2.20s for the first one, 2.47s for the second one, and 6.53s for the last one. And I have absolutely no clue on why ! Anyone has an idea please, even small one ? Unfortunately, I cannot reproduce it on codepen as I down't know how to include GSDevTools inside it

(* I've purchased Greensock Shockingly Greem membership $99.00/yr.) Full explanation of issue is in the pen file. Have tried literally EVERYTHING it seems to get this thing to work? Two hrs into at this point. (Is there a specific "fully contained code and path examples,) file that would get this working so that one could download it and save a lot of angst? Thanks for your help!

Hey folks, I'm trying to setup GSDevTools on a Vuejs using Npm and Webpack. All the plugins are in the folder: /node_modules/gsap I'm using Vuejs and my component looks like: <template lang="html"> <div> <div id="animate" @click="animateIt"> content </div> </div> </template> <script> import {TimelineMax, CSSPlugin, Sine, GSDevTools} from 'gsap' export default { name: 'ComponentName', data: () => ({ var_1: 'dummy' }), methods: { animateIt: function() { var t1 = new TimelineMax() t1.to('#animate', .2, { opacity: 1, ease: Sine.easeInOut }) .to('#animate', .2, { css: { color: red, }, ease: Sine.easeIn }) } }, mounted() { GSDevTools.create() } } </script> For others plugins they work as expected so i can import them when needed using for example: import {TimelineMax, CSSPlugin, Sine, Power4} from 'gsap' But if I add the GSDevTools as for the others this doesn't work. If I import the plugin with: import {GSDevTools} from 'gsap' // or import GSDevTools from 'gsap/GSDevTools' // or import GSDevTools from '../../../node_modules/gsap/GSDevTools' // or import * as GSDevTools from '../../../node_modules/gsap/GSDevTools' // or var GSDevTools = require ('gsap/GSDevTools') // or var GSDevTools = require ('../../../node_modules/gsap/GSDevTools') I got this error: I'm stucked, please Help!!! Thanks

Guys, Although I've worked with GS before, GSDevTools is new to me. I'm loving it but finding I get varying results in the playback. I have some code which I'll list below and it includes a draw function then a splitText function then a fade function which are on a masterTL. I hit play and all's well but if I hit play to watch the animation again the fade gets quicker and seems to move up the timescale and if I hit play again it gets quicker still and then disappears. I've tried including TL functions to reset vars but it doesn't make any difference. Obviously the code doesn't change. <CODE> /*Draw Function - makes .svg with class="badge" visible then draws it, then fades the container div #splash and all works fine*/ function drawBadge (){ TweenLite.set("#coreBadge", {visibility:"visible"}); var tl = new TimelineLite(); tl.from(".badge", 0.6, { drawSVG: 0, delay: 0.2 }); tl.to("#splash", 0.6, {autoAlpha: 0, display:"none"}); return tl; } /*Split Text function - variable received to function as console confirms, makes <p> visible then performs splitText on <p> and works fine*/ function runText (textLine) { TweenLite.set(textLine, {visibility:"visible"}); var mySplitText = new SplitText(textLine, { type: "chars" }), tl = new TimelineLite(); console.log("done split ",textLine); tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04); return tl; } /* Fade Function - variable received to function as console confirms, then tweens a simple repeating fade on same <p> as Split Text function and works fine first time*/ function hudFadeEffect (hudLine) { TweenMax.to(hudLine, 0.8, {delay: 0.8, alpha: 0, repeatDelay: 0.1, repeat: -1, yoyo: true}); console.log("fade effect",hudLine); return hudLine; } /*Timeline*/ var masterTL = new TimelineMax(); masterTL.add(drawBadge(), 0) .call(runText, ["#hudGenius"], 1) .call(hudFadeEffect, ["#hudGenius"], 2) What am I doing wrong? I know you'd probably appreciate a pen but mine's private - I can send the url to GS superfabheroes if you want via email. Buzz

First of all: Loving the GSDevTools! But I am facing a problem. It seems to only work properly when I call GSDevTools.create() when all timelines are set up already. I have to modify the timelines/values at runtime (after GSDevTools.create() was called). I was digging through the source code without any luck. I stumbled upon the two functions updateList() and update(). Both sounded promising at first, but didn't do the job. // Timeline One var tl1 = new TimelineLite({id: 'one'}) tl1.to(".orange", 1, {x:700}) .to(".green", 2, {x:700, ease:Bounce.easeOut}) // Timeline Two var tl2 = new TimelineLite({id: 'two'}) tl2.to("h1", 1, {x:100, ease:Bounce.easeOut}); // Create DevTools var myDevTools = GSDevTools.create(); // Add Timeline Three after 2s setTimeout(function() { var tl3 = new TimelineLite({id: 'three'}) tl3.to(".grey", 1, {x:200, ease:Bounce.easeOut}); // Some desperate attempts ;) // All not working. Timeline 'three' will never be shown myDevTools.updateList(); myDevTools.update(); }, 2000); Question(s): Is a runtime refresh not supported yet? Or what am I doing wrong? Is there any workaround to e.g. destroy the current DevTools and recreate them from scratch again? Thanks in advance and guys... keep up the amazing work! Simon [Huge GSAP Fan]

Hi GSAP folks, Please help to sort out the following. Imagine I have index.html with 2 iframes with timeline in each one. What I'd want to is getting and controlling each iframe timeline with GSDevTools from opened index.html where these iframes are placed. The question is how to make GSDevTools to see timelines from iframes? Here I've used codepen iframes but of course in fact there should be local html files. Maybe it's more JS specific question. Thanks in advance. Cheers Vitaliy

Hi, I just plugged GSDevTools to my js file, but GSdevtools not picking up my timeline IDs, and also it default to Global Timeline and continue to play till 90.00sec. why is that? function gotoNext($out, $in) { var tl = new TimelineMax({ id: "sliderOut" }), $slide_left = $out.find(".slider-left"), $slide_svg_path = $out.find(".svg-bg > .svg-bg-left"), $slide_name = $out.find(".slider-project-name"), $slide_desc = $out.find(".slider-description"), $slide_tech = $out.find(".slider-tech > ul li"), $slide_right = $out.find(".slider-right"), $slide_static_name = $out.find(".slider-static-title"), $slide_on = $out.find(".slider-no"), $slide_img = $out.find(".slider-img"); tl .set($in, { autoAlpha: 1, className: "+=active" }) .set($out, { className: "-=active" }); // other tweens } GSDevTools.create({ id:"#sliderOut" });