mvaneijgen

2024-06-01T17:49:12Z

Are you looking for something like this https://gsap.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates()?

2024-06-01T14:50:44Z

Great glad it helped! Oh yeah maybe alpha was in older versions and indeed also the easing function changed. I've updated your pen below and have included GSDevTools.create({animation: tl}); as you can see this creates a playback element which is just like any video you would watch, by default if you create a timeline all tweens on that timeline get played right after each other, so no need to include delays.

If you update the duration of a tween and use single tweens you'll have to update the delay of the other tween, with timelines this gets all handled for you automatically. Check out this awesome getting started guide for some of the basics https://gsap.com/resources/get-started/

See the Pen RwmpjBP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

24 minutes ago, machaussetteverte said:

const' and not 'var'

Since the time you've used it Javascript has been updated a lot, there are now several ways to create variables, where const if is one of them const means it will be constant and is a variable which will not be update. This forums isn't really to go into the weeds about how or what, but I do recommend checking out a post or YouTube video on the topic, Javascript has become really powerful since then.

26 minutes ago, machaussetteverte said:

In Codepen, I saw that there are HTML, CSS, and JS editing windows, and that's a great simple set-up to write codes

Codepen is also great for that, when you're done you can click the export button in the lower right corner and it will just give you an HTML, CSS and JS file which you can use on your server. The current kind of code editor is https://code.visualstudio.com, but any code editor will do! Never used Brackets my self, but surely will do the job!

Hope it helps and happy tweening!

2024-06-01T12:53:40Z

Hi @xylis welcome to the forum!

There are a few properties you're better off not animating, because some of them cause a browser repaint which is very resource intensive on the browser. Animating transform properties are much more performant, in your case you can set scale: true on the flip setup, below from the docs https://gsap.com/docs/v3/Plugins/Flip/

Quote

Boolean - by default, Flip will affect the width and height CSS properties to alter the size, but if you'd rather scale the element instead (typically better performance), set scale: true.

This is just a demo of course, so I'm not sure what it is you're trying to do, but in this case you don't even need flip if you just use a gsap tween, but again you're better of not animating the height of an element. Hope it helps and happy tweening!

See the Pen BaeWwYe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

2024-06-01T07:56:10Z

You'll have to create an animation that will clip the text at the correct moment. Clip path is great for that I always use this tool to create my clip-paths https://bennettfeely.com/clippy/ only thing you'll have to remember that you can only animate if the clip path has the same amount of points and all values must be suffixed with the same measurement eg all values in this case get a % suffixed (even 0 where it doesn't really need it, but GSAP needs this for complex string animations).

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Right now I've hard coded some values, I personally like to do this because this allows me to fork my work and have a known working version, so that when I make this dynamic and it is not working I can test it against my hardcoded values to see what is going wrong. I'll leave the rest for you to thinker with. Hope it helps and happy tweening!

See the Pen GRaWmea?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

2024-06-01T07:27:58Z

Hi @machaussetteverte welcome to the forum!

I didn't know you could add HTML and JS to Adobe Animate. What I do know is that TweenMax is a really old syntax from version 2 of GSAP and what you load is already is version 3. See below

// Old syntax
TweenMax.from(this.bkgMC, 1, {alpha:0});
TweenMax.from(this.mainMC, 1, {delay:1, scaleX:0, scaleY:0, ease:Back.easeOut});
TweenMax.from(this.titleMC, 1, {delay:2, alpha:0});

// New syntax
gsap.from(this.bkgMC, {duration: 1, alpha:0});
gsap.from(this.mainMC, {duration: 1, delay:1, scaleX:0, scaleY:0, ease:"back.out(1.7)"}); // check the ease visualizer https://gsap.com/docs/v3/Eases/CustomEase/#description
gsap.from(this.titleMC, {duration: 1, delay:2, alpha:0});

// Even better make use of a timeline, now you don't even have to delays, timlines will put everthing in sequance automaticly 
const tl = gsap.timeline({});
tl.from(this.bkgMC, {duration: 1, alpha:0});
tl.from(this.mainMC, {duration: 1, scaleX:0, scaleY:0, ease:"back.out(1.7)"});
tl.from(this.titleMC, {duration: 1, alpha:0});

If you have more code check out our migration guide https://gsap.com/resources/3-migration

We ask our users to provide a minimal demo, so that we can dive in to the code directly and help you debug. From just the description I cant really think of anything, but I'm not a Adobe animate expert. Can you provide a minimal demo on Codepen and just drop the HTML, CSS and JS Animate gives you in the corresponding panels. Below a pen you can fork which loads all the GSAP plugins even the bonus once! The only thing I see is weird is alpha: 0 I've never heard of a property of alpha on the web? I know there is opacity, so maybe change that and see what it does.

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

5 hours ago, machaussetteverte said:

I'm a designer, not a developer.

Same here, but a few years back I've learned myself to code and couldn't be happier and now can do both! GSAP is great tool to slowly get you familiar with Javascript, because under the hood that is all it is! Hope it helps and happy tweening!

Friday at 03:03 PM

Hey welcome to the club! We're glad to have you!

Enjoy the tools and be sure to let us know if you need any help. Happy tweening!

Friday at 02:39 PM

Hi @Opto welcome to the forum!

I've split your reply into its own topic. Just for reference here was the original topic.

Indeed DrawSVG is a (paid) club perk you need to be at least a paying member of the GSAP Plus level. You say you're have signed up for the club, but your account doesn't indicate that you've signed up. I'll ping @GreenSock just to be sure that your payment went through ok.

That the plugin installs with the normal gsap install is not fully correct. When you sign up you get an Installation Token with which you can install the premium plugins using a private repo, so only payed members have access to the plugins. You're how ever free to use the trial packagehttps://gsap.com/resources/trial/ to test all the payed plugins on places like Codepen, Stackblitz and you can even test the plugins on your local machine!

I hope this clears things up!

Friday at 06:48 AM

I think you explained yourself perfectly well, the thing is you first have to learn to walk before you start running. The effect you share is really cool and has probably been build by a team of professionals with years of experience. If you want to build something like that you first have to layout your HTML and CSS perfectly before you start animating. I would not pick this as my first project, seems rather complicated and you'll need a firm understanding of CSS and how perspective works with it and also a good understanding of the GSAP tools and not to be mean, but that isn't really the case that is why've said "I’ve placed some comments in your JS to better explain things, please be sure to read through them!"

I would tackle this project one at a time and just focus on simple things at first and then tackle more complex problems when you get the hang of it. Hope it helps and happy tweening!

https://gsap.com/resources/get-started/

You can also check out our demo page if you want to get some inspiration on how certain things are setup

https://gsap.com/demos/?page=1&tags=ScrollTrigger

Friday at 06:30 AM

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.

I’ve placed some comments in your JS to better explain things, please be sure to read through them! My advise disable ScrollTrigger (see below pen) and first focus on the animation you want to happen, only when you're happy with that add ScrollTrigger back in to see how it works on scroll. Also if you want to get the most out of these forum, don't list a bunch of requirements, just pick your first issue and post that and if that has been solves tackle the next question. I'm curious what you can come up with your selfs, just focusing on the animation. If you need a refresher, just browse through https://gsap.com/resources/get-started/ and check out position parameter. Hope it helps and happy tweening!

See the Pen KKLaOar?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Friday at 06:13 AM

34 minutes ago, Bobby18 said:

Thank you and can you guide what if I want to spin this in other direction?

It rotate both was based on where the current item is, there isn't really "other direction". If you only ever want it to spin in one direction you could keep track of the current item and then check how much the items that is being clicked is removed from that spot and then calculate how much it should rotate in your particular direction to get to the same spot.

38 minutes ago, Bobby18 said:

2 - If i want to add more branches then what changes do i need to make?

If they all get the class .circle I think nothing would change, but I would just try it and the if an issue arrives tackled that when you get there.

Hope it helps and happy tweening!

Friday at 06:06 AM

1 hour ago, Mohit Pain said:

When you view the page on a mobile screen, you will see that my pink section moves under the first top section, and the third section also starts overlapping behind the first section. You will notice my problem when you do not add multiple matchMedia queries for different screens just run my code same as it is, dont change the code and you will find my problem.

Yeah, that is the issue. I don't see this happening.

1 hour ago, Mohit Pain said:

you have added two matchMedia queries for different screen sizes, and I can see that this has solved my problem. However, what I did was create a single matchMedia query only for the mobile screen and one global tl

You have to timelines/ScrollTrigger that target the same elements you'll need to do a lot op cleanup for the first one to make it work again. That is why wrapping it in another match media fixes the issue, this does all the clean up for you and will make it that no to ScrollTrigger can be active at a time.

Thursday at 04:45 PM

I've resized my browser multiple ways, but I cant anything going wrong. Do you maybe have a screenshot or screen recording of the issue you're seeing?

What I would recommend is wrapping all the GSAP code in a .matchMedia() function and have it setup so that only one of the setups can be active at a time, if you do the matchMedia function will do all the clean up for you so that you don't have to worry about it. Hope it helps and happy tweening!

See the Pen jOoyQEB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Thursday at 01:06 PM

Hi @techwithjenn welcome to the forum!

As you can see in your log cSpell is giving you this error ( it looks like it's vscode extension that does spell checking https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) And it is correct in thing that gsap is not a word in the dictionary, so if you want to get rid of this error you'll have to check cSpell their docs how to add a word to the ignore list.

Hope it helps and happy tweening!

Thursday at 11:30 AM

I've done some tweaks and add 180 degrees to each element and this seem to do the trick. I've also updated to the latest version of GSAP. Hope it helps and happy tweening!

See the Pen mdYRLRB?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

Thursday at 08:04 AM

You've miss spelled trigegr in your ScrollTrigger setup it should be trigger: ".squar", if you change this everything works as expected. Just as a side note it is a good idea to get in to the habit of not animating your trigger element, so instead of using .squar as your trigger I would wrap it in another element called something like .trigger and use that, this will save you a lot a debugging in the future. Hope it helps and happy tweening!

See the Pen JjqEMxN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Thursday at 07:55 AM

Hi @Bobby18 welcome to the forum!

We ask for a minmal demo, so that we can dive directly in to the code and don't have set it up ourself before we can help you. If you would be so kind to create a minimal demo in one of the places provided were codepen is the easiest of the bunch, then someone here will be surely able to help you.

I've also split your question from the original topic, no need to bother all those people 4 years later. Below a pen you can fork and place your code in.

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

Wednesday at 12:02 PM

Hi @OyabunG welcome to the forum!

Everything is possible with GSAP, it just depends how much time you want to invest to get things working. You could look in to SVG clipPaths.

See the Pen bGQjVxq by mvaneijgen (@mvaneijgen) on CodePen

I've written a guide how they work. If you still need help after that please share a minimal demo with what you've already tried. We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools Hope it helps and happy tweening!

Wednesday at 09:34 AM

Just setting the end trigger to "bottom bottom" fires onLeave when I scroll to the bottom of the page. What exactly is not working in your case?

See the Pen rNgjadx?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen

Wednesday at 09:28 AM

Hi @elderspite welcome to the forum!

When you want to target a class you have to prefix it with a dot eg spinme becomes .spinme

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

Hope it helps and happy tweening!

See the Pen YzbNPYE?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

Wednesday at 09:11 AM

I'm not sure why you would need flip for that. If you create a timeline you can just mix and match Flip with normal tweens and combine them in to one animation. When animating complex strings you have to make sure all the suffix are the same, eg in your case suffix all the values with a % sign. You can read more about this here

In your Flip state you tell it to capture the clipPath, but none of the elements you 'watch' have a clip path property, only your <img> tag has this property, to that is also the element you want to watch. Again tweening a clipPath isn't really something you'll need flip for you can just use a normal tween for that. Hope it helps and happy tweening!

See the Pen NWVdPxL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Tuesday at 02:50 PM

It is much easier to edit the properties you add by adding a class to a GSAP tween and make that all part of the timeline that gets controlled by ScrollTrigger, then to juggle classes that needs to be add or removed.

So instead of having this in your css .header-active { opacity: 1; top: 4rem; }, just add it to your timeline mainTimeline.to('header', {opacity: 1, y: '4rem' ); that way it will reverse when you scroll up and play when scrolling down. Hope it helps and happy tweening!

Edit: If you go that route be sure to remove transition: opacity .5s ease-out .5s, top .5s ease-out .5s; from your css You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete.

Tuesday at 01:18 PM

You can just set the height using the start and end properties. I don't know what 000 0 200vh would do, but I've modified your demo so that the end is at the bottom of the element + the window height time 2 eg 200vh. Now the pin lasts the height of the element times twice the window height. You can also set it to `top+=${window.innerHeight * 2} top`, so that it is just 200vh. With ScrollTrigger always enable markers, so that you can see what it is doing under the hood and for bonus points set the id of the ScrollTrigger for maxim readability! Hope it helps and happy tweening!

See the Pen qBGqKgg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Tuesday at 10:29 AM

Yep. @Cassie also did some clever tricks with CSS, but most of the logic is set through the data attributes using HTML. It is a really clever setup, but when starting out I think ScrollTrigger is easier to learn, because you can first focus on the animation you want to happen and when you've got that you can hook it up to the scrollbar using ScrollTrigger. So my advise would be open up a codepen with your own layout and try adding some animations when you've got that try adding these animations to ScrollTrigger to see how they would work on scroll. Good luck and happy tweening!

Tuesday at 08:58 AM

Hi @Ahgogo welcome to the forum!

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! The demo you shared just uses the ScrollSmoother plugin https://gsap.com/docs/v3/Plugins/ScrollSmoother/ and not so much ScrollTrigger. ScrollSmoother uses the data-speed="1" attribute in the HTML to control the speed of the element to do its magic. As you can see it requires almost no setup to create a really cool effect, but it isn't ScrollTrigger, this uses a whole other logic to do its magic. If you're looking for inspiration check out these ScrollTrigger demo's check https://gsap.com/demos/?page=1&tags=ScrollTrigger

If you're new to GSAP I highly recommend to check out this awesome getting started guide https://gsap.com/resources/get-started/ to familiarise yourself with the basics.

Again we love to see what you can come up with yourself to better help you, just sharing a pen of someone else doesn't really help. Try getting your hand dirty by opening your own Codepen, this is the best way to learn. Hope it helps and happy tweening!

May 27

I would do something like this. You could add some more tweens to have different levels of opacity or if you want them to loop check out the Seamlessly loop helper function https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

See the Pen XWwNKKO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

A while back I've written something about an observation I've made what I see others do and also fall in to myself sometimes and that is optimising code before it is even working. What always helps me is just writing the whole animation out by hand which make it so you can see patterns emerging, when you've got that down it will be much easier to optimise code. Check out the post, maybe it also helps you in your endeavours. Happy tweening!

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by mvaneijgen