nico fonseca

Hey @Antdev , here you have a thread with an effect similar to the one you want to implement 🙌
 
 

Hey @SkyFall, welcome to the forum ! 💚
 
I updated your code so that the animation works with the button, and I updated with the new GSAP version 🙌
If you need to pause the animation you can use the paused:true property in your tween.

See the Pen eYejgJp by nicofonseca (@nicofonseca) on CodePen


And yes if you need to change something with drag you can use Draggable + Inertia Plugin and change the timeline progress for example 🙂

Hey @Bimal Pandey you can use the same tween and play with the reverse and play methods to show and hide the cursor.
I made a Codepen for you so you can see the example in action 🙌


See the Pen 8dca6234eee2852316e898382b34b303 by nicofonseca (@nicofonseca) on CodePen
 
PS: To follow the cursor you can use the method quickSetter() for a boosted performance 
 
Happy tween 🎉

Hi @Anael_, welcome to the forum ! 💚

There are many ways to solve this and I created one for you 🙂. The problem when using position absolute is that you lose the .container dimension (width, height) and if the elements were not positioned with position absolute animation can get weird.
So I created this, only animating the transform x, y, calculating the container dimensions and the left position of the element.


See the Pen XWareXV?editors=0110 by nicofonseca (@nicofonseca) on CodePen

  I hope this helps 🙌

Hi @tibo78, when you use $('.whatever') jQuery will target all those elements from your page, so it is the same as document.querySelectorAll('.whatever'). So when you use those elements to animate with GSAP all are affected.
 
You need to target only the elements you want to animate, you can do something like this:

See the Pen 0aa7834959a64963e469a2d64e5328ec by nicofonseca (@nicofonseca) on CodePen

Hey @Syed Azam, welcome to the forum! 💚

You can do something like this: 

See the Pen e81138427318c2826079e5c3f2ac4d41?editors=1010 by nicofonseca (@nicofonseca) on CodePen


The trick to achieve the mask effect is move the parent element to a direction and they child element to the opposite at the same time. gsap.to(parentElement, { xPercent: -100, duration:1 }); gsap.to(childElement, { xPercent: 100, duration:1, });
I hope this can help you. 🙂
 

Hey @Syntrix ,
If you use '.tiles .child' you are affecting all tiles children of your page, but you need to target only the clicked tiles. For example:

See the Pen 1a2940a4f8186b528f3fd56344e813a8 by nicofonseca (@nicofonseca) on CodePen
 

I added this on your code and now only the content of the clicked tile will be animated 🙂 const content = tile.querySelector('.inner-content');
See the Pen 6b14dfdd6d6d63285ba927580178efa1?editors=1010 by nicofonseca (@nicofonseca) on CodePen
 
 

Hey @PG1 that is because Chrome blocks the audio if the user didn't interact with something in the page. You need to add a button or any action so the user can interact on the page before your animation. You can check this if you click on the page before your animation begin.
To avoid audio errors you can go here. 🙂

 

Remove the rotationX:180  and set rotationY:180  
 
gsap.set(".qf-back", { rotationY: 180 });
See the Pen d545b63056a5335bae9abe60660b0c46?editors=1010 by nicofonseca (@nicofonseca) on CodePen

Hey @PG1 you can use .timeScale() method to change the velocity of your timeline 🙂

See the Pen 2bf967d372822e74956540bc54c5650e by nicofonseca (@nicofonseca) on CodePen

Hey @_Greg _ I really liked the idea 🙂
I used a quickSetter to set the lines position and updated them based on the wrapper position.


See the Pen 27b6e70f467907cd31e5ed6f528a5c90?editors=1010 by nicofonseca (@nicofonseca) on CodePen

  Is it helpful ? 
 

@Space Man I'm not seeing anything in your pen. Please import GSAP and add the missing HTML elements ("#sweep_slow, #sweep_fast,#flash") so we can check your issue. 

Btw here is a recent thread about how to sync a video with a timeline:
 

I only used querySelector to get the div child from valOne/valTwo and set the innerHtml.
 
I don't know if I understand what you need, but the clip animation is not doing anything. Also, you need to use clip-path instead of clip as it is deprecated, you can learn more here.

I leave you an example of a clip-path animation 🙂

See the Pen 4fc55558b1a5fc49a4170e4b6031aa59 by nicofonseca (@nicofonseca) on CodePen

@Skatedan something like this?


See the Pen 4e8a91ca94a783949a147dd62661552a by nicofonseca (@nicofonseca) on CodePen

Here I made a pen for you


See the Pen b1ff5801861c6ae59f2dcd041c3acfcf by nicofonseca (@nicofonseca) on CodePen

@Elindo   x:200  This syntax doesn't exist in Javascript, you can use the getProperty method to get the x value from your element:
 
btna.onclick = () => { if (gsap.getProperty("#Rod","x") < 200) { if(animation)animation.kill(); animation = stagea1(); } else if (gsap.getProperty("#Rod","x") == 200) { if(animation)animation.kill(); animation = stagea2(); } }  

@whizzbbig something like this?  🙂

https://codesandbox.io/s/circulartexteffect-forked-qrk9q?file=/src/index.js

PS: I don't know why, but you need to reload the preview to see the animation 🤷‍♂️

@Cassie I think @PG1 need something like the pen that you created for the position parameters


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


I love this pen 💚

Hey @PG1 you need to change this : 
 
tl.add(spinAnimation); tl.add(moveAnimation); to this:
 
tl.add(spinAnimation()); tl.add(moveAnimation()); 🙌
 

Hey @ThePixelPixie you can do something like this. Send the color you want to the function in order to animate


See the Pen ecfe39fecf06caa658105d4536da694a by nicofonseca (@nicofonseca) on CodePen

Hey @CodyHill, first you need to declare your timelines outside the observer, otherwise every time it is activated you will have a new timeline
and then you set pause as default property in the first timeline, so all the timeline tweens are paused.


See the Pen 443a63d77367c077e1e674c7d3726834 by nicofonseca (@nicofonseca) on CodePen

Hey @Lolia Trafam you need to use a forEach to animate each element individually, otherwise GSAP animate all elements with the same time.
You can see more about it here: 
 

Hey @PG1 You can encapsulate timelines in functions and return them. So you can add them to your main timeline in case you need it.


See the Pen dddfbcace3b98e86269a13a95518c709 by nicofonseca (@nicofonseca) on CodePen


Does this help you ? 🙂
 

@Milenoi you can use Labels and Seek to go to a specific part of your timeline. 🙂


See the Pen 14585a76fbb7490c4917556978f8c4e3 by nicofonseca (@nicofonseca) on CodePen

Hey @whizzbbig I created a very small demo for you.


See the Pen fa5f335f743d719744d4f34243a2250f by nicofonseca (@nicofonseca) on CodePen


To create this type of animation you'll need a loading animation and an entrance animation. So, when all the images are loaded or the loading animation finished you'll start the entrance animation.
And you don't need the setTimeout() 🙂

For the shape effect you shared, you can use: