Want to make an interactive parallax effect? Want a layer to rotate while scrolling? The keyframe is for you.
You can create motion driven by Scroll, Timeline, and Cursor. Adding keyframes is as easy as Adobe Effect. Get ready for next-level effects!
💡Jumpstarts your journey with fun and speedy learning by duplicate
Dora Project - 🔗 Keyframe
Make A Scroll Animation
1. Make Page Scrollable
Drag the page height control handler to make the page scrollable.
2. Open Keyframe Drivers
Click the Drivers button to show or hide the current page's keyframe drivers.
3. Add Keyframes
To add keyframes, drag the black driver cursor to a position where you'd like to add a keyframe and then change the value of that property. Dora will insert a new keyframe for you automatically. Keyframes can be removed by clicking on them and then clicking the red button to the left of the keyframe's row.
Make A Timeline Animation
1. Create a new Timeline, add as a driver, and edit it.
In the top right corner of the Keyframe panel, create a new Timeline.
You can create any keyframes you need. Refer to the image below; I created a left-to-right translation animation. The unit is 10ms, so the vernier at 150 represents the 1.5s duration.
2. Add an On appear Event, use [Play timeline] to auto play this Timeline.
You can use the [On appear] trigger to automatically play the Timeline.
The Timeline effect will play automatically when the page loads for the first time.
3. Or add an Click Event to play this Timeline manually.
As shown in the below image, select a Widget and add an event click to drive it.
