Dora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
07. DatabaseDatabase
Database
Database
Database
05. ComponentComponent
Component
Component
Component
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
07. DatabaseDatabase
Database
Database
Database
03. 3D3D
3D
3D
3D
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
05. ComponentComponent
Component
Component
Component
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
Database
Database
Database
Database
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
07. DatabaseDatabase
Database
Database
Database
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
03. 3D3D
3D
3D
3D
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
05. ComponentComponent
Component
Component
Component
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
05. ComponentComponent
Component
Component
Component
07. DatabaseDatabase
Database
Database
Database
Component
Component
Component
Component
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
05. ComponentComponent
Component
Component
Component
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
03. 3D3D
3D
3D
3D
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
05. ComponentComponent
Component
Component
Component
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
07. DatabaseDatabase
Database
Database
Database
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
07. DatabaseDatabase
Database
Database
Database
03. 3D3D
3D
3D
3D
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
Keyframe
Keyframe
Keyframe
Keyframe
03. 3D3D
3D
3D
3D
Image sequence
Image sequence
Image sequence
Image sequence
03. 3D3D
3D
3D
3D
03. 3D3D
3D
3D
3D
Image Sequence
Step 2. Select a image sequence
Step 2. Add hover state
Click the Drivers button show or hide the current page's keyframe drivers.
Click "+" to add a new state, and set the property value to "Hover".
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
1. Click ”Select a source“ to open the source panel.
Step 1. Open Keyframe Drivers
1. Images should be a PNG or JPEG format. 2. All uploaded files need to be in the same format.
1. Images should be a PNG or JPEG format. 2. All uploaded files need to be in the same format.
Step 2. Add hover state
Step 1. Open Keyframe Drivers
2. Switch to the image sequence tab and click the ‘Upload’ button.
2. Switch to the image sequence tab and click the ‘Upload’ button.
Click the Drivers button show or hide the current page's keyframe drivers.
Click ‘+’ to add a new state, and set the property value to ‘Hover’.
Step 1. Open Keyframe Drivers
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Requirements:
Requirements:
VIEW NEXT
Step 1. Open Keyframe Drivers
Step 3. Add keyframes
Click the Drivers button show or hide the current page's keyframe drivers.
Add 2 keyframes to an image, with different current frame values.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Preview button to show the final effects.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 4. Preview
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 4. Preview
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 3. Change Current frame in the Hover state
Click the Drivers button show or hide the current page's keyframe drivers.
Select the image sequence in the hover state, and change the "Current frame" to 60.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 3. Add keyframes
Click the Drivers button show or hide the current page's keyframe drivers.
Add 2 keyframes to an image, with different current frame values.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Preview button to show the final effects.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 4. Preview
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 4. Preview
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
This is a finished work. Preview it!
Step 1. Open Keyframe Drivers
Step 1. Insert an image
Click the Drivers button show or hide the current page's keyframe drivers.
Drag an image to the canvas.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
07. DatabaseImage Sequence In Keyframe
1
1
Image sequence is a combination of images, that will be displayed independently when users scroll or change component state.
Step 2. Select a image sequence
Step 2.
Click the Drivers button show or hide the current page's keyframe drivers.
1. Click ”Select a source“ to open the source panel.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
1. Click ”Select a source“ to open the source panel.
Step 1. Open Keyframe Drivers
1. Images should be a PNG or JPEG format. 2. All uploaded files need to be in the same format.
1. Images should be a PNG or JPEG format. 2. All uploaded files need to be in the same format.
Step 2. Select a sequence image
Step 1. Open Keyframe Drivers
2. Switch to the image sequence tab and click the ‘Upload’ button.
2. Switch to the image sequence tab and click the ‘Upload’ button.
Click the Drivers button show or hide the current page's keyframe drivers.
1. Click “Select a source” to open the source panel.
Step 1. Open Keyframe Drivers
3. Select the image sequence to upload and rename it, or use the one we upload for you [IS_spiral].
Click the Drivers button show or hide the current page's keyframe drivers.
Requirements:
Requirements:
Step 1. Open Keyframe Drivers
Step 4. Add Interaction
Click the Drivers button show or hide the current page's keyframe drivers.
Add a hover interaction from the Default state to the Hover state, and set the animation time to 1000ms.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Database
Database
Database
4 mins
Database
4 mins
4 mins
4 mins
Step 1. Open Keyframe Drivers
Step 3. Add keyframes
Click the Drivers button show or hide the current page's keyframe drivers.
Add 2 keyframes to your image with different "Current frame" values, and you will see it moves when the "Current frame" value is changed.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 1. Create component from image sequence
Click the Drivers button show or hide the current page's keyframe drivers.
Select the image sequence, and click "Create component ".
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
This is a finished work. Preview it!
Image Sequence In Component
2
2