AntonioNB4 Posted June 12, 2023 Share Posted June 12, 2023 Is there a demo of the scroll effects at 0.23 sec of the video below ? Link to comment Share on other sites More sharing options...
Cassie Posted June 12, 2023 Share Posted June 12, 2023 Hi there - all the websites featured in here are by independent agencies, we don't have access or permission to distribute any of the code. That being said, if I have the correct timestand (screenshot attached) the animation at 0.23 doesn't look complex at all, just some scaling and a nice expo.out ease. If it's the AAWUM site, why don't you set up a codepen with the HTML markup and styling and I can give you a hand with it? Link to comment Share on other sites More sharing options...
AntonioNB4 Posted June 12, 2023 Author Share Posted June 12, 2023 Hi Cassie, I will try and update you 1 Link to comment Share on other sites More sharing options...
AntonioNB4 Posted June 13, 2023 Author Share Posted June 13, 2023 Hi @Cassie, i created something like this See the Pen YzRyzzB by Antonio-Nocella (@Antonio-Nocella) on CodePen I need to scale the text to the size of its parent container. Then there remains the rest of the animation, which is honestly a little more difficult for me. Link to comment Share on other sites More sharing options...
mvaneijgen Posted June 13, 2023 Share Posted June 13, 2023 2 hours ago, AntonioNB4 said: I need to scale the text to the size of its parent container. There isn't a way to do that easily, you have to calculate how much that is and then implement that in your animation. There are container queries now https://caniuse.com/css-container-queries, so maybe that will help, but you will still have to style it correctly and write the logic. It could also be useful the reverse the animation so instead of scaling up the animation, start with the big version an let GSAP animate from small. This way the scale doesn't become some weird value like 4 but it always is between 0 and 1. For the rest of the animations you could look in to clip-path tweens, hear some tropics on the forum with useful info. Hope it helps and happy tweening! Something like this. Where I've set the font-size to 8vw, which seems for this specific text with this font See the Pen zYMvEBq by mvaneijgen (@mvaneijgen) on CodePen 4 Link to comment Share on other sites More sharing options...
AntonioNB4 Posted June 14, 2023 Author Share Posted June 14, 2023 Could be a solution. Seems work. I need only last thing. After the scaling of the header i need to move it form the center of container to the top . Its possible ? Link to comment Share on other sites More sharing options...
Cassie Posted June 14, 2023 Share Posted June 14, 2023 Sure, why don't you give it a go, feel free to ask about any part of it that's confusing you! It's often more beneficial to step through it yourself. Link to comment Share on other sites More sharing options...
AntonioNB4 Posted June 14, 2023 Author Share Posted June 14, 2023 2 hours ago, Cassie said: Sure, why don't you give it a go, feel free to ask about any part of it that's confusing you! It's often more beneficial to step through it yourself. I did something like this. Please give me any suggestion or enhancements are welcome, beacuse i dont know if heading goes exactly to the top of the container. See the Pen QWJjRoW by Antonio-Nocella (@Antonio-Nocella) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted June 14, 2023 Solution Share Posted June 14, 2023 Hey @AntonioNB4, I've put some comments in your javascript code with explanations. The first thing is I don't see any use for more timelines, this can all be just one big timeline that plays in order. I would either use the position parameter or delays not both, I'll think if you use both you'll will get lost faster on what is influencing what tween. Instead of yPercent (which uses the height of the target element) I've used just the y: property. In there I use a function based value which gets the height of the parent (#preloader) and the height of the target element, then half that value, because you're item is already in the middle and moves that element, this is just basic math to get the pixel value the element needs to move. Hope it helps and happy tweening! See the Pen bGQVXVW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 5 Link to comment Share on other sites More sharing options...
AntonioNB4 Posted June 14, 2023 Author Share Posted June 14, 2023 Thank you mvaneijgen. I didn't think i can do it with one big timeline that plays in order. Very helpful 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted June 14, 2023 Share Posted June 14, 2023 1 minute ago, AntonioNB4 said: I didn't think i can do it with one big timeline that plays in order Well that is what GSAP is made for! You can write animations like you would draw a flip book and it will automatically put all the animations in order for you, no matter how complex or simple you want them to be! Good luck and happy tweening! 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 14, 2023 Share Posted June 14, 2023 Great guidance @mvaneijgen 💚 2 Link to comment Share on other sites More sharing options...
AntonioNB4 Posted June 19, 2023 Author Share Posted June 19, 2023 Hi @mvaneijgen, If i want to change the end position, as it rises to the top, instead of in the centre top but left top how can I do it ? Link to comment Share on other sites More sharing options...
Rodrigo Posted June 19, 2023 Share Posted June 19, 2023 Hi, I'm not completely sure I follow what you're trying to do. Maybe something like this: See the Pen VwVjWmr by GreenSock (@GreenSock) on CodePen Hopefully this helps. If not, please be as specific as you can in terms what you're trying to achieve. Happy Tweening! Link to comment Share on other sites More sharing options...
AntonioNB4 Posted June 20, 2023 Author Share Posted June 20, 2023 See the Pen bGQVXVW by mvaneijgen (@mvaneijgen) on CodePen it should start as in codepen but when it goes up it must move not only upwards in the container but simultaneously to the left to stop at the top left corner. Link to comment Share on other sites More sharing options...
Rodrigo Posted June 20, 2023 Share Posted June 20, 2023 Hi, Sorry but I still don't understand what you're trying to achieve here. In the codepen example I posted and the latest one you posted the text ends at the top of the viewport. It doesn't end at the left end because of the styles you have applied. I think @mvaneijgen's advice is the best course of action here. Set up the styles so the element is at the final position and then create a from() instance to move it from the position you want or create a set instance to move it to a specific starting position. I updated the codepen example: See the Pen VwVjWmr by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
AntonioNB4 Posted June 21, 2023 Author Share Posted June 21, 2023 Its perfect ty to all 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now