Jump to content
Search Community

throttle animation problem with site

uavide test
Moderator Tag

Recommended Posts

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

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.

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

@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.

  • Like 3
Link to comment
Share on other sites

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

 

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!

 

 

  • Like 6
Link to comment
Share on other sites

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

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 content

https://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 use

https://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 from

https://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.

  • Like 4
Link to comment
Share on other sites

 

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

 

  1. 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 covered
    note: 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
     
  2. change the to part of the fromTo tween to 0 instead of what was calculated with regard to the innerHeight
     
  3. 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

 

  • Like 5
Link to comment
Share on other sites

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

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.

 

  • Like 5
Link to comment
Share on other sites

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

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!

 

  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...