fitzmode

I specialise in web based graphic design and video editing tools like crello.com, promo.com, offeo.com, powtoon.com. Available for new projects and have a large repository of prebuilt features to cut down on development time. Supports: Premade templates Custom fonts (Google Fonts, Typekit, Custom) Images (Pixabay, Pexels, Depositphotos) Backgrounds (Pixabay, Pexels, Depositphotos) Animated Backgrounds (Lottie) https://lottiefiles.com Animations (Lottie) https://lottiefiles.com Music/Audio and Voice Recording (.wav, .mp3) Videos Gif (Giphy, Tenor) Tools Undo/Redo Duplicate Delete Custom Filters Blend Mode Crop Color Fill Shadow, Shadow Color Rotate Align to canvas Flip Zoom Pages All animated content (animated videos) are built on GSAP and can be rendered to .webm and .mp4 for video. Static designs can be exported to .pdf, .jpg and .png. See frequently updated video demos here . Available to chat via private message, email fitzmuzenda@gmail.com or Twitter @fitzmode.

Noted thanks. One more issue arises - clearProps seems to work fine on DOM elements but when I try to apply this on a custom non-DOM objects (animating canvas shapes) I get the warning: Invalid property clearProps set to true Missing plugin? gsap.registerPlugin() Does clearProps only work with DOM / CSS animations or am I missing something? Here's my attempt to clearProps on nested tweens and timelines. function clearProps(timeline) { const targets = timeline.getChildren(); for (let i = 0; i < targets.length; i++) { if (targets[i].constructor.name === 'Timeline') { clearProps(targets[i]); return; } if (targets[i].targets().length) { gsap.set(targets[i].targets(), { clearProps: true }); } } }

Thanks Zach, This seems to be the solution for my contrived example. Is there a way to clearProps on an entire timeline with multiple targets and multiple tweens or do I have to loop over all the targets and set clearProps on each individually?

I have a `from` tween where `immediateRender` is `false` that animates an object's x position value from -500. However, after the tween is played, setting `timeline.pause(0)` resets the tween to the position where x is -500.How can I reset the animation to the original position where x is 0?.

I've updated the example to use gsap.timeline()syntax. The goal is to Pause the video on pause of the main timeline. Resume the video on main timeline resume. The problem is: There are no onPause or onResume events available. Checking if the current nested timeline is isActive() cannot be done onUpdate event callback, since callback stops being called once the main timeline is paused. i.e it is never called. I'm looking for strategies to do this, ideally via gsap. The example represents a more complex setup, so would like to avoid looping over video element dom nodes and pausing them all manually to pause and resume videos.

How can I get something similar to an onPause event? I have TimelineMax instances nested on a main TimelineMax. The nested instances each play a video `onStart` event. Each video has its own TimelineMax instance nested in the main timeline. I would like a way to detect an `onPause` for each instance to pause the video and keep it in sync with the main timeline. However it seems I can't check `isActive()` inside of main timeline's `onUpdate` to pause each video accordingly because main timeline `onUpdate` is not called again after main timeline is paused. I've created an example that represents my use case on Codesandbox. https://codesandbox.io/s/stoic-wozniak-7u7ev?file=/src/App.js ** As an aside, any chance we can get Codesandbox embeds on the forums?

Is there a built in way to stop/pause a Timeline at a specific time? //Plays from 5 seconds timeline.play(5) //I'm looking for a way to play from 5 seconds and stop at 10. timeline.play(5, 10)

Hey there, I have a Timelinelite instance where I running both "single shot" and "repeating" animations, however, I'd like the "timeline.totalDuration()" to not include repeat. My goal from the below is to get a total duration of 1.5sec , that is duration without repeat. Is there a method I can use to get that? Thanks. const timeline = new Timelinelite({paused: true}); timeline //Animation A ( 1 second duration) .to('#box',{x: 0,duration: 1 }, 0) //Animation B ( 0.5 second duration) .fromTo('#box',{x: currentX - 2},{x:currentX + 2,duration: 0.5, repeat: -1}, 0.5);