Step 1. Open Keyframe Drivers
Step 3. Enter 3D Editor
Click the Drivers button show or hide the current page's keyframe drivers.
Double-click on the 3D widget or select the 3D widget child layer in the left panel to enter the 3D editor.
Click the Drivers button show or hide the current page's keyframe drivers.
Double-click on the 3D widget or select the 3D widget child layer in the left panel to enter the 3D editor.
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 3. Enter 3D Editor
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 3. Enter 3D Editor
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 2. Import a 3D model
Step 2. Import a 3D Model
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Import button on the top bar of the 3D editor.
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
The 3D file: Make sure the 3D file isn't corrupted, has the correct and supported file extension, and isn't larger than 15MB. Supported formats: 3dm, 3ds, amf, dae, drc, fbx, glb, gltf, json, ifc, kmz, ldr, mpd, md2, obj, pcd, ply, stl, svg, usdz, vox, vtk, vtp, wrl, xyz, zip.
The 3D file: Make sure the 3D file isn't corrupted, has the correct and supported file extension, and isn't larger than 15MB. Supported formats: 3dm, 3ds, amf, dae, drc, fbx, glb, gltf, json, ifc, kmz, ldr, mpd, md2, obj, pcd, ply, stl, svg, usdz, vox, vtk, vtp, wrl, xyz, zip.
Step 2. Import a 3D model
Step 1. Open Keyframe Drivers
Or click the Import button in the top bar in the 3D editor.
Or click the Import button in the top bar in the 3D editor.
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.
A 3d scene supports importing multiple 3d models.
A 3d scene supports importing multiple 3d models.
Step 1. Open Keyframe Drivers
Step 5. Edit 3D Model
Click the Drivers button show or hide the current page's keyframe drivers.
Use the buttons on the top bar to Move, Scale and Rotate the 3D model.
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 2. Import a 3D model
Requirements:
Click the Drivers button show or hide the current page's keyframe drivers.
A 3d scene supports importing multiple 3d models.
Click the Drivers button show or hide the current page's keyframe drivers.
Your 3D file should be less than 20MB. Supported formats: 3ds, dae, fbx, glb, gltf, obj, ply, zip
Step 1. Open Keyframe Drivers
The 3D file: Make sure the 3D file isn't corrupted, has the correct and supported file extension, and isn't larger than 15MB. Supported formats: 3dm, 3ds, amf, dae, drc, fbx, glb, gltf, json, ifc, kmz, ldr, mpd, md2, obj, pcd, ply, stl, svg, usdz, vox, vtk, vtp, wrl, xyz, zip.
The 3D file: Make sure the 3D file isn't corrupted, has the correct and supported file extension, and isn't larger than 15MB. Supported formats: 3dm, 3ds, amf, dae, drc, fbx, glb, gltf, json, ifc, kmz, ldr, mpd, md2, obj, pcd, ply, stl, svg, usdz, vox, vtk, vtp, wrl, xyz, zip.
Step 2. Import a 3D model
A 3D scene supports importing multiple 3D models.
Or click the Import button in the top bar in the 3D editor.
Or click the Import button in the top bar in the 3D editor.
Click the Drivers button show or hide the current page's keyframe drivers.
A 3D scene supports importing multiple 3D models.
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.
A 3d scene supports importing multiple 3d models.
A 3d scene supports importing multiple 3d models.
This is a finished work. Preview it!
Use 3D Widgets
1
1
Import from Figma
Import from Figma
Import from Figma
2 mins
Import from Figma
2 mins
2 mins
2 mins
2. Select the "Alien. glb" layer on the left panel.
Step 1. Open Keyframe Drivers
Step 3. Set the End Keyframe
Click the Drivers button show or hide the current page's keyframe drivers.
1. Drag the handle to "400". 2. Adjust the angle, scale, and position of the "Alien.glb". 3. Add a keyframe.
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. Add a 3D widget
Step 1. Add a 3D Widget
Click the Drivers button show or hide the current page's keyframe drivers.
Drag a 3D widget 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.
Drag a 3D widget to the canvas.
Step 1. Open Keyframe Drivers
Step 1. Add a 3D widget
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Drag a 3D widget to the canvas.
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 4. Adjust Camera
Step 4. Adjust camera
Click the Drivers button show or hide the current page's keyframe drivers.
Every 3D widget has a built-in default camera and sets it as the current camera. You can adjust it with the following gestures:
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.
Every 3D widget contains a built-in default camera that sets as the current camera. You can adjust it by using the following steps:
Step 1. Open Keyframe Drivers
Step 4. Adjust Camera
Step 1. Open Keyframe Drivers
You can also click on the camera menu to switch the current one to another.
You can also click on the camera menu to switch the current one to another.
Click the Drivers button show or hide the current page's keyframe drivers.
Every 3D widget contains a built-in default camera that sets as the current camera. You can adjust it by using the following steps:
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.
Create a 3D scroll animation
2
2
1. Open the Keyframe panel on the top bar.
Try it out!
04. Import from FigmaStep 2. Set the start keyframe
Step 2. Set the Start Keyframe
Click the Drivers button show or hide the current page's keyframe drivers.
Add a keyframe when the handle is at "200".
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.
Add a keyframe when the handle is at 0.
Step 1. Open Keyframe Drivers
The 3D file: Make sure the 3D file isn't corrupted, has the correct and supported file extension, and isn't larger than 15MB. Supported formats: 3dm, 3ds, amf, dae, drc, fbx, glb, gltf, json, ifc, kmz, ldr, mpd, md2, obj, pcd, ply, stl, svg, usdz, vox, vtk, vtp, wrl, xyz, zip.
The 3D file: Make sure the 3D file isn't corrupted, has the correct and supported file extension, and isn't larger than 15MB. Supported formats: 3dm, 3ds, amf, dae, drc, fbx, glb, gltf, json, ifc, kmz, ldr, mpd, md2, obj, pcd, ply, stl, svg, usdz, vox, vtk, vtp, wrl, xyz, zip.
Step 2. Set the start keyframe
Step 1. Open Keyframe Drivers
Or click the Import button in the top bar in the 3D editor.
Or click the Import button in the top bar in the 3D editor.
Click the Drivers button show or hide the current page's keyframe drivers.
Add a keyframe when the handle is at 0.
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.
A 3d scene supports importing multiple 3d models.
A 3d scene supports importing multiple 3d models.
Try it out!
less than 4
VIEW NEXT
Step 1. Open Keyframe Drivers
With the 3D features, you can import 3D models and make interactive 3D animations.
App TourDora 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
In this version, to make sure the 3D site performs best. We suggest users have of 3d widgets. (There is no limitation of 3d models inside one 3d widget.)
Step 1. Open Keyframe Drivers
Step 4. Preview
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Preview button to preview the scroll animation.
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