JoffreyPersia

Thank you I made it thank to you !!

Hiiii Cassie ! Thank you so much I watched your second tutorial few days ago and I didn't wanted to just create multiple timelines, but after your last post, I tried and succeded it with the logic of classes ! Thank you ! Here is the codepen updated : https://codepen.io/pixelmort27/pen/ExoxBex?editors=1111 I am trying now to create a stagger and a scale up 'Elastic' for the icons 1-2sec after the page is loaded (I just played with the autoAlpha here for the try), but I can't play with the scale property because I created a class for these specific icons size. Here is the final result : https://dev.3-6-9-12.org/ I also tried with the initial CSS transform: scale(0); transition : 0.4s; but it interfeer with the function movingObjects() Have you an idea ?

Thank you so much Cassie for your kind help I think I understand your code now, but still trying to figure out a way to, for each div, to affect a value randomly that will define the size and the velocity of the element. An element has a value between 1 and 5, for example 4, then he will be bigger than the elements with a number 1,2 and 3, and move quicker (because we will have the illusion that he is above). I tried with the loop each, but you move the code outside it (I understand as the variables was duplicated and it was bad for perf. Should I loop with a each the gsap timeline ? I tried but can't

Oh thank you Cassie !!! I will try to do it in the next few days ! Can't wait to dive in ! @Cassie I am trying to follow your awesome tutorial, I have the feeling that I am moving somewhere ahah but I am wondering how I can create a timeline and an animation for each children "icon" I tried something with : icon.each( function () { // set variables and timeline } ) https://codepen.io/pixelmort27/pen/ExoxmLd But I can't make it work. They all are moving together. Have you an idea ?

Oh thank you Cassie !!! I will try to do it in the next few days ! Can't wait to dive in ! @Cassie I am trying to follow your awesome tutorial, I have the feeling that I am moving somewhere ahah but I am wondering how I can create a timeline and an animation for each children "icon" I tried something with : icon.each( function () { // set variables and timeline } ) But I can't make it work. Have you an idea ?

Oh thank you Cassie !!! I will try to do it in the next few days ! Can't wait to dive in !

Hi guys, I have built this website https://dev.3-6-9-12.org/ I would like to : Animate the icons according to the mouse in a small range (top:10% +/- 2% and left:15% +/- 2% for exemple) Position the icons randomly at every refresh in a small range (top:10% +/- 2% and left:15% +/- 2% for exemple) I don't know if you have something in mind, if a good ref has already been shown here. I tried to search on the forum but couldn't find something close to that. Thank you so much

Thank you so much, it helps me a lot

Hi guys, I am here again ^^ I really got through JS after 2 weeks doing that all day long... but I got an other question. I have this codepen. I would like to animate the metabox (blue) in height when I open it. I don't know if I should use GSAP or CSS directly. GSAP seems to work very well with the height animation and I can create a timeline for example : - Display none - max-height 0 / padding 0 - max-height 9999px Or maybe an other function ? thank you in advance !

@akapowl, I tried to replicate it in my website. I succeded to trigger correctly the animation. But I am facing a case that I couldn't trigger correctly https://www.studio-artifex.fr/les-artifex/ When the mouse hover a card, the animation triggers correctly. When I click on a card, the animation is finished, so it is good, it stays. When the mouse leave, if the card has the class Expended, the animation stays and doesn't reverse. It is good. If I click on an other card, I would like to reverse the animation of the card previously clicked. With the each function, I don't know how I can manage it. Have you an idea ? Is there a way to trigger a function when the element loose a class ? Thank you contentWrapper = jQuery(".sa_card__contentContainer"); contentWrapper.each(function() { const thisContainer = jQuery(this); const thisNames = thisContainer.find('.sa_card__namesContainer div'); var someoneElseIsActive = false; const timelineHover = gsap.timeline({ defaults: { ease: "power2", duration: 0.3, }, paused: true, }) timelineHover.to(thisContainer, {opacity:1}); timelineHover.from(thisNames, {y: 30, stagger:0.1, opacity:0}, "-=0.2") thisContainer .on('mouseover', function(){ timelineHover.play() }) .on('mouseout', function(){ if( jQuery(this).parents(".sa_card__all").hasClass("expended")) { } else { timelineHover.reverse() } }); });

Thank you so much. I am learning a lot thanks to you.

Hi guys, I am struggeling with a small problem I guess. I would like to animate a card when the mouse hover it, but on my gsap code, I animate all the cards at once. I tried to get the ID but I wouldn't succeded it. Have you an idea ? Thank you

Thank you @GreenSock !

Thank you so much @Cassie ? So... With the css variables, the plugin GetRules is not so much useful ? In which cases this plugin is useful ?

Hi, I am starting to get things a little bit more complicated. Still a newbie btw. I created this second CodePen for the purpose of the example. I have 2 questions : How can I change the ScrollTrigger position when I use the Paroller effet on the parent Div ? The trigger shifts. I am trying, inside the loop, to have a tween that reduce the width to 0 of the texts's card. But I don't know the sentence for the getRules inside the loop. Maybe someone here know ? Thank you so much !