Such a great video and her explanation of every single detail and why we need to them is amazing. learnt a lot from this one video compared to heaps youtube videos I have watched so far and everyone is rushing and just showing how to do things rather than why we are doing it on a basic level. Thank you so much.
🎯 Key Takeaways for quick navigation: 00:00 🎉 *Introduction and Overview* - Introduction to the webinar and the presenters. 02:03 📋 *Brand Creation Process* - Explanation of the brand creation process, including defining values, designing the logo, color palette, font, and UI design system. 03:53 🖥️ *Building the Homepage* - Introduction to building the Wix Studio homepage and its components. 05:28 📐 *Design and Layout* - Demonstrating the design and layout process, including resizing elements and organizing content. 10:02 📏 *Making Elements Sticky* - Explanation and implementation of the sticky effect for elements on the page. 17:31 🚀 *Adding Reveal Effects* - Adding reveal effects to text elements and explaining the animation process. 24:16 🎨 *Creating Interactive Shapes* - Demonstrating the creation of interactive shapes and animations for the next section. 26:34 🎨 *Creating a stack for text boxes* - Stack function gathers text boxes and allows resizing and spacing adjustments. 28:22 🔄 *Using scroll effects for interactions* - Demonstrating how to add scroll effects to containers and shapes for animations. - Explains the animation area and precise design for animations. 34:56 📏 *Designing with responsive breakpoints* - Discusses responsive design and breakpoints for different screen sizes. - Shows how to adjust layout, interactions, and animations for mobile and desktop screens. 39:44 🎢 *Creating animations with line triggers* - Using a line as a trigger for animations, allowing precise control over animation start and end points. - Demonstrates how to use a line to trigger animations for different elements. 45:12 ❓ *Deciding animation start and end points* - Explains the process of deciding animation start and end points, emphasizing experimentation and adjusting values to achieve the desired result. 50:11 🌐 *Creating horizontal scrolling with sticky elements* - Demonstrates how to create horizontal scrolling with sticky elements. - Highlights the use of containers and stacks for efficient design. 54:02 🌈 *Fine-tuning scroll animations* - Shows how to fine-tune scroll animations by adjusting the animation area and ensuring smooth scrolling interactions. 55:05 🚀 *Tips and Takeaways* - Planning sections before designing helps create beautiful results. - Combining animations with sticky elements is a powerful technique. - Use section or other elements as triggers for animations. - Adjust or remove animations for tablet or mobile as needed. - Utilize groups, containers, and stacks to build faster and explore Wix Studio options. 56:41 💡 *Questions and Additional Information* - Answers the question about whether coding is necessary in Wix Studio. - Provides tips on getting started with Wix Studio, including exploring templates and the Wix Studio Academy. Made with HARPA AI
How do you make the circle animation appear to be coming from underneath the previous section? In this video it appears more like a separate section than a transition from one section to another
Hi! :) To create the shape that will appear above the image, we will have to build the two parts together in the same section. Then the image that is sticky will remain on screen and the shape will open above the image. To make the text go up, we will add another animation to the text through the container and the container will be a trigger for the animation. We can use a fade or move animation for the text as soon as the container enters.
I'm so confused by what I'm doing wrong. I've tried different methods to try to get the images to scroll and then fix on the screen but cannot create the same effect like at 54:55secs my efforts just move off the screen no matter what format I try.
In this case, we'd recommend having someone take a look at your site/project specifically. We'd recommend posting on our dedicated Studio forum > forum.wixstudio.com/. In case you are unable to get assistance there you can also submit a ticket to our customer care team at wix.to/iZTuzNF
Hello, I am learning frontend web development HTML CSS. I am a student in college. Will it be Beneficial for building a FrontEnd webpage alongwith learning web development and can I use wix studio for doing web development project? Thank you Wix team!
To make some elements fade out, you need to add another animation to the element you want to fade. If your element is already animated, then place the element in another container and add the new animation to it. You can use the next section or another element below to be the trigger.
Hello, is there a way to get all items if more than 10000 in free site before paying for a plan so when go live everything is on the site? if not what's the best way to do this?
Such a great video and her explanation of every single detail and why we need to them is amazing. learnt a lot from this one video compared to heaps youtube videos I have watched so far and everyone is rushing and just showing how to do things rather than why we are doing it on a basic level. Thank you so much.
Hey Devi, we're glad to hear that you found this video useful and your kind words are truly appreciated.
🎯 Key Takeaways for quick navigation:
00:00 🎉 *Introduction and Overview*
- Introduction to the webinar and the presenters.
02:03 📋 *Brand Creation Process*
- Explanation of the brand creation process, including defining values, designing the logo, color palette, font, and UI design system.
03:53 🖥️ *Building the Homepage*
- Introduction to building the Wix Studio homepage and its components.
05:28 📐 *Design and Layout*
- Demonstrating the design and layout process, including resizing elements and organizing content.
10:02 📏 *Making Elements Sticky*
- Explanation and implementation of the sticky effect for elements on the page.
17:31 🚀 *Adding Reveal Effects*
- Adding reveal effects to text elements and explaining the animation process.
24:16 🎨 *Creating Interactive Shapes*
- Demonstrating the creation of interactive shapes and animations for the next section.
26:34 🎨 *Creating a stack for text boxes*
- Stack function gathers text boxes and allows resizing and spacing adjustments.
28:22 🔄 *Using scroll effects for interactions*
- Demonstrating how to add scroll effects to containers and shapes for animations.
- Explains the animation area and precise design for animations.
34:56 📏 *Designing with responsive breakpoints*
- Discusses responsive design and breakpoints for different screen sizes.
- Shows how to adjust layout, interactions, and animations for mobile and desktop screens.
39:44 🎢 *Creating animations with line triggers*
- Using a line as a trigger for animations, allowing precise control over animation start and end points.
- Demonstrates how to use a line to trigger animations for different elements.
45:12 ❓ *Deciding animation start and end points*
- Explains the process of deciding animation start and end points, emphasizing experimentation and adjusting values to achieve the desired result.
50:11 🌐 *Creating horizontal scrolling with sticky elements*
- Demonstrates how to create horizontal scrolling with sticky elements.
- Highlights the use of containers and stacks for efficient design.
54:02 🌈 *Fine-tuning scroll animations*
- Shows how to fine-tune scroll animations by adjusting the animation area and ensuring smooth scrolling interactions.
55:05 🚀 *Tips and Takeaways*
- Planning sections before designing helps create beautiful results.
- Combining animations with sticky elements is a powerful technique.
- Use section or other elements as triggers for animations.
- Adjust or remove animations for tablet or mobile as needed.
- Utilize groups, containers, and stacks to build faster and explore Wix Studio options.
56:41 💡 *Questions and Additional Information*
- Answers the question about whether coding is necessary in Wix Studio.
- Provides tips on getting started with Wix Studio, including exploring templates and the Wix Studio Academy.
Made with HARPA AI
That was awesome, I was looking forward to this video! Thank you for detailing each animation in detail
We're so glad you enjoyed it, if you'd like to watch additional courses, head over to our Wix Academy > www.wix.com/studio/academy
This was very helpful information thank you and great teaching from Tal
Our pleasure!
How do you make the circle animation appear to be coming from underneath the previous section? In this video it appears more like a separate section than a transition from one section to another
Hi! :)
To create the shape that will appear above the image, we will have to build the two parts together in the same section.
Then the image that is sticky will remain on screen and the shape will open above the image. To make the text go up, we will add another animation to the text through the container and the container will be a trigger for the animation. We can use a fade or move animation for the text as soon as the container enters.
I'm trying to follow along and it requires me to have all the media images. Will you be able to provide that?
Hi there, you can use placeholder images and set the same sizes or, adjust the design you want and use the same settings.
I'm so confused by what I'm doing wrong. I've tried different methods to try to get the images to scroll and then fix on the screen but cannot create the same effect like at 54:55secs my efforts just move off the screen no matter what format I try.
In this case, we'd recommend having someone take a look at your site/project specifically. We'd recommend posting on our dedicated Studio forum > forum.wixstudio.com/. In case you are unable to get assistance there you can also submit a ticket to our customer care team at wix.to/iZTuzNF
Hello, I am learning frontend web development HTML CSS. I am a student in college. Will it be Beneficial for building a FrontEnd webpage alongwith learning web development and can I use wix studio for doing web development project? Thank you Wix team!
How'd you get stuff to fade out on scroll? Also...using another element as the trigger for intro's etc. is revelatory.
To make some elements fade out, you need to add another animation to the element you want to fade.
If your element is already animated, then place the element in another container and add the new animation to it.
You can use the next section or another element below to be the trigger.
Hello, is there a way to get all items if more than 10000 in free site before paying for a plan so when go live everything is on the site? if not what's the best way to do this?
Hi Scott. For assistance with this, please contact our customer care team here >> wix.to/om2NYEq
I will and hope to get the correct assistance as I have reached out a few times on this as well as coding and never get assistance.