bagakenny / homeplanet

homeplanet

In this Project I'm working on StoryTelling, by using SVG illustrations and manipulating them in the DOM with GSAP timeline method

The Goal is to setup everything in Figma Exporting separated files and naming them correctly

Process

• Setup File in Figma : Separate Layers, and name them correctly to make sur it follows css/html conventions
• Import SVG's
• Locate the classes and ID of parts of the SVG animation you need
• Create Timeline with Gsap Library
• Animate, play, have fun
• Make a storytelling first, a timeline with a start and Finish
• Use window.eventListener on scroll
• Pause the animation
• Seek(), method with react jumps to a certain frame in your animation
• Make the seek listen to where you are on the page (pageYOffset or ScrollY)
• There you Go 🍎

HTML CSS JS

The Illustrations are from Designer Javier Arce