MENU

Fun & Interesting

Bricks Builder + Bricksforge: GSAP Animations & Timelines

Brendan O'Connell 4,803 1 year ago
Video Not Working? Fix It Now

Hi, Brendan back with another Bricksforge.io video. I wanted to do a simple tutorial mixed with a practical application of GSAP animations in Bricksforge. Bricksforge offers a ton of extra addons, but this video is exclusively looking at the GSAP animation timelines. Now, this was not really a subtle animation that you'd necessarily use, but wanted to give you the idea of what you can do. To wrap up, I make a sunrise animation using the principles covered in the tutorial. If you want to see how Bricksforge works with Bricks Builder, check it out. Using my affiliate link to purchase below helps fund the channel at no extra cost to you. Let me know what you think and if its useful. GSAP Ease Visualizer https://gsap.com/docs/v3/Eases/ PEACE! Get Bricksforge: https://bricksforge.io?aff=d768d61b Get Bricks: https://bricksbuilder.io Get ACSS: https://automaticcss.com/ref/138/ Get Frames: https://getframes.io/ref/11/ Timestamps: 00:00 Intro to GSAP 01:45 gsap.to x-axis 03:00 gsap.from x-axis 03:55 gsap.fromTo 04:55 Stacking gsap animations 06:40 - Combining Animations on a single GSAP Timeline 7:15 Change animation builder to left side 09:15 Change order of animations in a timeline 09:50 - GSAP Easing Property and Visualizer 12:20 - Make a sunrise with learned techniques 13:00 Make class for Sun 13:50 Move sun 'up' in the sky, add blur, and change background color 15:50 Sunset by translating the sun back and 'setting', adding gap and duration 17:45 Change background color of section 20:00 Recap animation

Comment