[Available for web based video and graphic design tools work]

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.

[Reset timeline with immediateRender]

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 });
      }
    }
  }

 

[Reset timeline with immediateRender]

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?

[Reset timeline with immediateRender]

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?.

 

See the Pen GRjKNOL by anesumuz (@anesumuz) on CodePen

[onPause event]

4 hours ago, elegantseagulls said:

Hi @fitzmode,

 

I can't seem to get your example to work/quite figure out what you're asking.

Also, it'd be good practice (and easier for us to read/debug) to make sure you're using the GSAP3 gsap.timeline() syntax instead of the old TimelineMax

I've updated the example to use gsap.timeline()syntax.

The goal is to

1. Pause the video on pause of the main timeline.
2. Resume the video on main timeline resume.

The problem is:

1. There are no onPause or onResume events available.
2. 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. 

 

 

[onPause event]

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?

 

[Pause Timeline at specified time]

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)

 

[Repeat animation without affecting total duration]

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);