{"content":[{"id":"dsqsaz","name":"section","parent":0,"children":["xxaqkg"],"settings":{"_cssGlobalClasses":["pbccvx"]},"label":"SECTION"},{"id":"xxaqkg","name":"container","parent":"dsqsaz","children":["jmurog","ficgph"],"settings":{"_cssGlobalClasses":["yfztse"]},"label":"CONTAINER"},{"id":"jmurog","name":"heading","parent":"xxaqkg","children":[],"settings":{"text":"Rotate with perspective on Scroll","_cssGlobalClasses":["roiboz"]},"label":"HEADING"},{"id":"ficgph","name":"image","parent":"xxaqkg","children":[],"settings":{"image":{"id":13,"filename":"lance-anderson-QdAAasrZhdk-unsplash-scaled.jpg","size":"large","full":"https://bricksmotion.co/wp-content/uploads/lance-anderson-QdAAasrZhdk-unsplash-scaled.jpg","url":"https://bricksmotion.co/wp-content/uploads/lance-anderson-QdAAasrZhdk-unsplash-1920x1280.jpg"},"_cssGlobalClasses":["mlzqno"],"_direction":"column","loading":"eager"},"label":"PERSPECTIVE IMAGE"}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.7.3","globalClasses":[{"id":"pbccvx","name":"perspective-section","settings":{"_height":"150vh","_background":{"color":{"hex":"#243300"}}}},{"id":"yfztse","name":"perspective-container","settings":{"_alignItems":"center","_direction":"column"}},{"id":"roiboz","name":"perspective-title","settings":{"_typography":{"font-family":"Helvetica Neue","font-size":"9rem","font-weight":"300","text-align":"center","color":{"hex":"#c2ff2e"}},"_margin":{"top":"400px"},"_typography:tablet_portrait":{"font-size":"6rem"},"_typography:mobile_landscape":{"font-size":"4rem"},"_typography:mobile_portrait":{"font-size":"2.5rem"},"_margin:mobile_portrait":{"top":"120px"}}},{"id":"mlzqno","name":"perspective-image","settings":{"_display":"flex","_direction":"column","_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_background":{"image":{"id":13,"filename":"lance-anderson-QdAAasrZhdk-unsplash-scaled.jpg","size":"large","full":"https://bricksmotion.co/wp-content/uploads/lance-anderson-QdAAasrZhdk-unsplash-scaled.jpg","url":"https://bricksmotion.co/wp-content/uploads/lance-anderson-QdAAasrZhdk-unsplash-1920x1280.jpg"}},"_cssCustom":".perspective-image {\n opacity: 0.3;\n}","_margin":{"top":"20px"}}}],"globalElements":[]}
How to import?
Select the “Paste (All)” option from the Structure panel, or another method involves clicking on an empty area within the Structure panel, pressing the “Esc” key followed by the “Ctrl/Cmd + V” key combination.
{"content":[{"id":"dsqsaz","name":"section","parent":0,"children":["xxaqkg"],"settings":{"_cssGlobalClasses":["pbccvx"]},"label":"SECTION"},{"id":"xxaqkg","name":"container","parent":"dsqsaz","children":["jmurog","ficgph"],"settings":{"_cssGlobalClasses":["yfztse"]},"label":"CONTAINER"},{"id":"jmurog","name":"heading","parent":"xxaqkg","children":[],"settings":{"text":"Rotate with perspective on Scroll","_cssGlobalClasses":["roiboz"]},"label":"HEADING"},{"id":"ficgph","name":"image","parent":"xxaqkg","children":[],"settings":{"image":{"id":13,"filename":"lance-anderson-QdAAasrZhdk-unsplash-scaled.jpg","size":"large","full":"https://bricksmotion.co/wp-content/uploads/lance-anderson-QdAAasrZhdk-unsplash-scaled.jpg","url":"https://bricksmotion.co/wp-content/uploads/lance-anderson-QdAAasrZhdk-unsplash-1920x1280.jpg"},"_cssGlobalClasses":["mlzqno"],"_direction":"column","loading":"eager"},"label":"PERSPECTIVE IMAGE"}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.7.3","globalClasses":[{"id":"pbccvx","name":"perspective-section","settings":{"_height":"150vh","_background":{"color":{"hex":"#243300"}}}},{"id":"yfztse","name":"perspective-container","settings":{"_alignItems":"center","_direction":"column"}},{"id":"roiboz","name":"perspective-title","settings":{"_typography":{"font-family":"Helvetica Neue","font-size":"9rem","font-weight":"300","text-align":"center","color":{"hex":"#c2ff2e"}},"_margin":{"top":"400px"},"_typography:tablet_portrait":{"font-size":"6rem"},"_typography:mobile_landscape":{"font-size":"4rem"},"_typography:mobile_portrait":{"font-size":"2.5rem"},"_margin:mobile_portrait":{"top":"120px"}}},{"id":"mlzqno","name":"perspective-image","settings":{"_display":"flex","_direction":"column","_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_background":{"image":{"id":13,"filename":"lance-anderson-QdAAasrZhdk-unsplash-scaled.jpg","size":"large","full":"https://bricksmotion.co/wp-content/uploads/lance-anderson-QdAAasrZhdk-unsplash-scaled.jpg","url":"https://bricksmotion.co/wp-content/uploads/lance-anderson-QdAAasrZhdk-unsplash-1920x1280.jpg"}},"_cssCustom":".perspective-image {\n opacity: 0.3;\n}","_margin":{"top":"20px"}}}],"globalElements":[]}
Structure & Styling
Start bei adding a SECTION > CONTAINER > HEADING + IMAGE
Your HTML structure should look like this:
SECTION
Give your SECTION a class e.g. .perspective-section and style it as you like, in my case it looks like this:
background-color: #243300 height: 150vh -> so we are able to scroll
CONTAINER
Give your CONTAINER a class e.g. .perspective-container and style it as you like, in my case it looks like this:
display: flex flex-direction: column align-items: center
HEADING
Give your HEADING a class e.g. .perspective-title and style it as you like, in my case it looks like this:
Give your IMAGE a class e.g. .perspective-image and set the following styles:
margin-top: 20px background-image: INSERT BACKGROUND IMAGE Loading: eager -> IMPORTANT
Custom CSS:
root {
opacity: 0.3;
}
Great. HTML structure and styling is all set up.
GSAP with Bricksforge
NOTE: You can download the SET – Perspective / Rotation X Event if you don’t want to rebuild this.
Ok, as we have the HTML structure and styling set up, we will now build the scroll animation.
1. EVENT
Open the Bricksforge Panel. Click on Events and add a new Event. Give the Event a descriptive name like: SET – Perspective / Rotation X.
Set the Event to On Pageload (DOMContentLoaded)
In the Actions Tab create a new Action and choose GSAP Set.
In the Action Settings Tab set the Target Element to Custom (Document QuerySelector) and .perspective-image (or the CSS class you created for the IMAGE).
Inside the JavaScript Object input field insert
{transformPerspective: 1200, rotationX: 45}
What have we done here? We have set two parameters (transformPerspective, rotationX) to a specific class (.perspective-image) as soon as the page is loaded.
2. ScrollTrigger
Ok, lets set up the ScrollTrigger
NOTE: You can download the Perspective Scroll Timeline if you don’t want to rebuild this.
Open the Bricksforge Panel. Click on Timelines and add a new Timeline. Give the Timeline a descriptive name like: Perspective Scroll.
Assign the following settings in the Settings Column:
Trigger: ScrollTrigger
Trigger Selector: .perspective-image
Scroll Start: top 65%
Scroll End: top 30%
Use Scrub: ON
Smooth Scrub Value:1
Now add a Animation in the Animations Column with the following settings:
Method: To
Selector to animate: .perspective-image (use trigger)
In the To Tab:
Rotate X Axis: 0
Opacity: 1
Duration: 1
Add another Animation in the Animations Column with the following settings:
Method: From
Selector to animate: .perspective-title
In the To From:
Translate Y Axis: 80px
Opacity: 0.3
Duration: 1
Position: Start of the previous animation
This is one way of creating a perspective scroll effect. You could also do it without the Event and set the ScrollTrigger Animations to “From To” and insert
{transformPerspective: 1200, rotationX: 45}
in the JavaScript Object of the Action.
Good to know: the lower the value of transformPerspective the HIGHER is the seen perspective. If you set it the value to 200 the perspective will be way more significant. If you want the IMAGE to start with a stronger X rotation you can set the value of rotationX: higher. Take into account that a value of 360 means a whole flip.
