uavide Posted April 21, 2022 Share Posted April 21, 2022 Good morning, I'm building a site with Wordpress and the Divi Builder. I have this animation in GSAP that I would like to edit. Here the original: https: //taxiboat.salone24.it/throttle-originale/ Here how I would like it: https: //taxiboat.salone24.it/throttle-mio/ The css and js files are visible at the codepen link. What I would like to have is that when I scroll the page, the white circle that masks the image, it closes completely (while now it remains a little open), and only after the circle has closed completely and has hidden the background image, only now, my module appears (the one visible in the second link / throttle-mio /). (The slide with the big image) Could you help me understand how I can do it? Many thanks Davide See the Pen eYyXPYR by uavide (@uavide) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted April 21, 2022 Share Posted April 21, 2022 Neither of those links is working for me and none of the required scripts are loaded into the CodePen. There's also a lot of code to parse. Perhaps you could create a minimal demo with a motionPath and couple divs along with your GSAP related question. The simpler the better. That way we can better assist you. Happy tweening. 1 Link to comment Share on other sites More sharing options...
uavide Posted April 22, 2022 Author Share Posted April 22, 2022 Thanks for your answer, here are the right link like examples: Here the original: https://taxiboat.salone24.it/throttle-originale/ Here how I would like it: https://taxiboat.salone24.it/throttle-mio/ I add html from my page to the codepen..now it works..here: Thanks Davide Link to comment Share on other sites More sharing options...
Cassie Posted April 22, 2022 Share Posted April 22, 2022 Really not sure what you're asking Davide, sorry. This isn't a minimal demo. This is an entire wordpress theme with external JS files. As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites. We are more than happy to answer GSAP-specific questions though. If you can strip the demo down to the bare minimum necessary to address the question at hand. (or maybe just start over from scratch, that may be easier) we'll try to give you some advice on how to get closer to your goal. 2 Link to comment Share on other sites More sharing options...
uavide Posted April 22, 2022 Author Share Posted April 22, 2022 Thanks for your answer. I understand what you mean but i'm not able to extrapolate just the html that i need without all the connections with the page on wp and Divi Builder. So maybe it will be easier to ask if you know and you can indicate an animation like the one that i shows (so circle mask that on scroll it cover completely the background and after that a module it appears. Thanks Davide Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 22, 2022 Share Posted April 22, 2022 @uavide We ask for a minimal demo to get to the bottom of the issue. What you are sharing is just a code dump of your live site and is really hard to debug, I've looked at it and couldn't understand what was going on. By creating a minimal demo you'll help us understand/see the issue and it is a great chance for you to better understand the tools you're trying to use. What I find really remarkable is when I narrow down the scope of my issue and try to recreate it I'll probably stumble on the solution myself and if not I got a demo I can share. A demo is just some colored `<div>`'s with a few lines of Javascript. 3 Link to comment Share on other sites More sharing options...
uavide Posted April 23, 2022 Author Share Posted April 23, 2022 Thanks, of course I understand what you mean and I agree ... but this code is intersected with Divi builder that runs under wordpress and for my standards as a developer it becomes too complex a thing. So I ask you if there is a tutorial or an example of a circular mask that closes over a background image when scrolled. Because I've only seen examples of a mask that opens over a background image. un example like this: https://taxiboat.salone24.it/throttle-originale/ Thanks Davide Link to comment Share on other sites More sharing options...
Cassie Posted April 23, 2022 Share Posted April 23, 2022 You can often find a good starting point by searching these forums. These threads look like they have what you're after! Good luck! 2 Link to comment Share on other sites More sharing options...
akapowl Posted April 23, 2022 Share Posted April 23, 2022 Let me just throw this one into the mix... ... which was based on this one by @PointC ... ... and also has some good advice by @Cassie that in the end using a clip-path might be more performat than using a mask as in the demos there. Happy tinkering! 6 Link to comment Share on other sites More sharing options...
uavide Posted April 25, 2022 Author Share Posted April 25, 2022 Thank you very much for you support, finally i think that this animation should be a start point for build what i would like to have. Here: See the Pen jOYopVL by uavide (@uavide) on CodePen Premised that I am a beginner, I would like to ask you kindly if it is possible to make these changes and additions on this model: 1 - How can I have the text (Beautiful Place) under the mask when closing? as you can see now when closing the mask the text stays over the mask 2 - How can I make the mask above the background close completely, because now the circle mask does not close completely above the backgroun image. 3 - After the mask has closed completely above the background image, how can I make an image or module appear over the mask? (on my site I should display an image slide module ... so it would be enough for me to just have animation in blur or entry from below of a div with id or class that I would then assign to my module). I hope that you can you help me. Thanks a lot again. Davide Link to comment Share on other sites More sharing options...
Cassie Posted April 25, 2022 Share Posted April 25, 2022 Hey there Davide. This is quite a list of requirements - we're happy to answer GSAP specific questions but these forums aren't a place to get people to make changes and additions for you.1) you will need to mask/clip the HTML content. Here's an example of an SVG clip path being used on HTML contenthttps://www.sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/ And an article explaining how to scale SVG clip paths for HTML usehttps://css-tricks.com/scaling-svg-clipping-paths-css-use/ 2) You may need to add some markers to your animation to debug where the start and end are Here's a video to watch that may help you understand scrollTrigger. 3) Here are some demos you can learn fromhttps://greensock.com/st-demos/ Maybe the layered sections demo is what you're looking for? See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen Hope these links help. 4 Link to comment Share on other sites More sharing options...
akapowl Posted April 25, 2022 Share Posted April 25, 2022 Yup, I'm with Cassie there - before jumping in on the deep end, it might be better to get familiar with how GSAP works in general first (tweens, timelines etc.) and then with the basics of how ScrollTrigger works and then all the SVG stuff, masking, clipping etc. - otherwise you will only just run into one roadblock after the other. And as Cassie mentioned, these forums are not intended to deliver tutorials on how to achieve certain effects. That said, you could alternatively to Cassie's suggestion maybe just make it SVG text instead and position it in the markup in a way that it would be coverednote: I mainly just copied over the CSS styles from your text - you might want to look up what properties are actually valid for SVG text change the to part of the fromTo tween to 0 instead of what was calculated with regard to the innerHeight use a timeline to be scrubbed through instead of a single tween - and add a reveal of whatever you'd want after the tween on the cover Especially for 3 you'll want to get familiar with how durations and the position-parameter work on scrubbed tweens/timelines. Happy learning and good luck with the project! See the Pen yLpWRzJ by akapowl (@akapowl) on CodePen 5 Link to comment Share on other sites More sharing options...
uavide Posted April 28, 2022 Author Share Posted April 28, 2022 Hi to everyone..first of all I would like to thank you for helping me, it is one of the best forums I have ever seen...in addition to helping, it also encourages you to learn. So I started to take a look at how Gsap works and I was able to make my first animation...😃 Now the text "Beautiful Locations" exits the screen as the mask closes by scrolling. Here codepen: See the Pen jOYopVL by uavide (@uavide) on CodePen Thanks @akapowl for the example on codepen you gave me to work on. Really appreciate it. I wanted to ask how I can center the text "Beautiful Locations", because as you can see it is shifted to the right. Then I noticed, once I imported the animation (in wordpress with Divi Builder), that on the Firefox browser, when I scroll down the page, and I get to my animation, it doesn't stop directly on my background with the animation, but it scroll down a bit on the page of the site and suddenly it goes back to the background where the scroll starts the animation. This doesn't happen on Chrome. Why do you think this happens? here is the link that allows you to better understand what I mean: https://taxiboat.salone24.it/closemask_gsap_ok/ Many thanks to everyone Davide Link to comment Share on other sites More sharing options...
akapowl Posted April 28, 2022 Share Posted April 28, 2022 11 minutes ago, uavide said: I wanted to ask how I can center the text "Beautiful Locations", because as you can see it is shifted to the right. These should help https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline 14 minutes ago, uavide said: Then I noticed, once I imported the animation (in wordpress with Divi Builder), that on the Firefox browser, when I scroll down the page, and I get to my animation, it doesn't stop directly on my background with the animation, but it scroll down a bit on the page of the site and suddenly it goes back to the background where the scroll starts the animation. This doesn't happen on Chrome. Why do you think this happens? That could have multiple reasons - but I don't see any different behaviour in FF compared to Chrome with that codepen example. We don't have the capacity to debug live websites, so it would be best if you could re-create your issue in a minimal demo if you need help on this. 5 Link to comment Share on other sites More sharing options...
uavide Posted April 29, 2022 Author Share Posted April 29, 2022 Thanks, For put the text "Beautiful Locations" to the center, i tried to use these parameters text-anchor:middle; dominant-baseline:central; alignment-baseline:middle; So in codepen here: See the Pen jOYopVLthese by uavide (@uavide) on CodePen i add to .svg-text class these parameters and it works. text-anchor: middle; dominant-baseline: middle; With firefox i tried with all three parameters, to put one, remove another, put them together etc..but the text is always loaded at the first refresh of the browser on the right, then if I do another refresh of the firefox browser, the text goes to the center (as I would like it to be). This is a weird behavior that I can't figure out how to fix. Here the link of the page if you try to open it with firefox: https://taxiboat.salone24.it/closemask_gsap_ok/ As far as concerns the problem (always on firefox) of adding white space under the animation when I scroll down the browser and suddenly, while I scroll, the page jumps and goes back to the animation and at that point the animation starts with the scrollertrigger. On Chrome it works. In this link there is the video of the page on Chrome (before) and on Firefox (after). This way you can understand what I mean. https://taxiboat.salone24.it/bug_firefox/ On Codepen it works, so I can't report the problem, because I don't know what the problem itm could be with firefox. I hope you can help me understand why firefox gives me this problem. Maybe it's the animation pin? i tried to make some changing, to anticipatepin etc..but without result. Many Thanks David Link to comment Share on other sites More sharing options...
akapowl Posted April 29, 2022 Share Posted April 29, 2022 6 minutes ago, uavide said: With firefox i tried with all three parameters, to put one, remove another, put them together etc..but the text is always loaded at the first refresh of the browser on the right, then if I do another refresh of the firefox browser, the text goes to the center (as I would like it to be). This is a weird behavior that I can't figure out how to fix. Using the text-anchor and alignment-baseline that I linked to, it shows centered up for me all across the board. <text x="50%" y="50%" text-anchor="middle" alignment-baseline="central" class="svg-text">Beautiful Place</text> Again, I can not identify any different behaviour on Firefox compared to Chrome. The codepen demo you linked is showing a 404 Error btw, so I'm not sure how exactly you were trying to handle things, but for me it works as I would expect it to work. See the Pen zYpgMOw by akapowl (@akapowl) on CodePen I also can not identify any issues with the pinning of the code provided earlier when adding some space before the section in question (neither on Chrome nor on Firefox). But I am on a Windows machine and it looks like you are on Mac - so maybe someone else can have a look and tell if they see the behaviour you are describing / showing in your video. See the Pen vYdBJwy by akapowl (@akapowl) on CodePen 18 minutes ago, uavide said: On Codepen it works, so I can't report the problem, because I don't know what the problem itm could be with firefox. If it works in codepen but not on your live website, the chances that something else on your website is causing the problems are pretty high. There is just too much involved on live websites that could cause the problem, that's why we ask for minimal demos. The only thing that comes to my mind after a quick look, is maybe try to change the order of your ScrollTriggers and see if that changes anything - the pinning one should actually be created first as it comes first on the page. Other than that, I can not offer any more help if you can not provide a minimal demo recreating your issue, I'm afraid. Maybe somebody else can. And of course you are welcome to try and hire someone to help you with your live website in the Jobs & Freelance forum. Happy scrolling! 5 Link to comment Share on other sites More sharing options...
uavide Posted May 10, 2022 Author Share Posted May 10, 2022 Thanks to everybody...i will search the way to fix the issues with browser. Have a nice day! 2 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