Animation extension: Timelines feature and method

② New Method: Timeline. If “timeline” is selected one can pick an existing timeline or create a new one. Multiple animations and on different elements can be assigned to the same timeline. Editing the timeline (offsets etc) wouldn’t fit in the side panel and is part of the BricksForge Panel:


③ Timeline would display in a tab on the BricksForge panel (tdb., just a mockup/screenshot from another animation project, Hirnschmalz notwendig to make it fit and word great in BricksForge)

3 Likes

Hehe, heavy task! But I like the idea. Let’s see… :wink:

1 Like

There is always the possibility to add another animation extension:

This comes loaded with a timeline module…

1 Like

Just wrote a new post in our facebook group. I want also to target it here:

Many of you are looking forward to the possibility to create GSAP timelines in the Bricksforge Panel. We are currently working on it. This will allow you to create animations not only based on the element ID, but class based. This means in practice: you can create a global class .animation-1 and define specific animations for this class. Wherever you now give an element the class .animation-1, the animation will run. This saves a loooot of time when using animations on multiple places!

This function is decorated with a visual timeline for visualization.

Look forward to it. It’s really fun to work with! !The function will probably be included in the next version.

Thanks @MaxZieb for your inspiration! In the first step the visual timeline will not be complex like we know it from motion.page or video software. And for the first version it will be only a represantation of the animation settings, but this has a lot of potential to be extended in the future!

3 Likes

:exploding_head: :star_struck:

You are officially my new John Carmack (hence, computer programming hero)! Looking forward to explore the screenshot and the release version on the future. Thanks for the shout out!

1 Like

This is great news. When we can assign classes, the stagger function wil be possible👍🏽

1 Like

Really happy to see this being added, @Daniele! Although this is V1 and will be “basic” do you have plans to expand this feature to be inline with something like Motion.Page? (I own it, but would prefer something built into Bricks, so this would be :fire:)

To follow that up, I’d love to see some of the features that Pinegrow has (example) which aren’t found in anything else atm.

DOM and Media triggers using GSAP. As this is built into Bricks I’m assuming this would be possible vs other solutions like Motion.page which use an iFrame

Mic Drop! You did it…

I also watched the announcement… very well played, indeed.


Quick feedback:

AMAZING!


Some minor details while watching:

  • Maybe add also pointer events as they trigger on mobile and desktop and don’t require repeating setting up triggers.
  • I love the scrubbing in the builder. Maybe we need a drag handle to move the entire panel up and down while open, so we enjoy more of the in builder scrubbing while keeping our timelines in view (more or less and also accommodating big and small screens)
  • looking also forward to more event types down the line, but this is already such an astonishing start!

Update:

What about discerning according to break point. There is a new method in GSAP

Might come in hand-me-down the line.