Louienator

I've experienced macromedia flash before, but it's just frame by frame animation. I envied awwwwards.com entries coz' they've taken the animations to a new level. But, thanks for this. I'll purchase the monthly package next week. Cheers Cassie.

Thanks Cassie, but adding threejs to my learning is a bit advanced, i'm going back to the baby steps and take one step at a time. But i already learned the basics of tweening. I want to disect the code piece in order for me to understand more clearly.. Apart from this what you've send, what's the next step in learning gsap in medium level or after the basics? is there any exercises? thank you Anyways, thank you so much Cassie..

Good day everyone, Just a thought. i've been learning javascript and wanted to master GSAP, is there any way you can advise or give tips on how to learn fast and create complex animations on GSAP? thanks. any reference/advise will do. Thank you so much

hi Mvaneijgen, Thanks for the solution, i'm basing on this xd design, this is what i was going to achieve for this is my current project. i'm planning to go full gsap if i can achieve this slider within a slider. but if now, i'll just stick to my solution that's slick on the main and gsap on the inner slider that will change every 5 seconds. you could also see the carousel effect in that xd.. UI reference https://xd.adobe.com/view/b1154e9f-e4e5-43bb-bf20-42c078949efe-e446/ Cheers

Oh yeah, i forgot to add my code here. apologies. I want the image on the right will have have a carousel effect that will scale down half size and and opacity will be 0 if it's not active.. https://jsfiddle.net/abkLmyrv/3/

I saw this post saw the small number in the example of pietM the transition that i wan to achieve is like the once on the lower left number, the small one.. it will automatically slide and change image from top to bottom. Here's the sample link from PietM

Hi Cassie, i'm trying to avoid conflicts cause it didn't work, maybe a conflict with my other gsap animation i guess.

Hi Jack, Last quesiton.. I've changed the gsap.util to bannerHover so that it'll be unique but bec. it didn't fire in my end. and when i checked the console, it says "cannot read property of undefined" here's my code https://jsfiddle.net/2L74ymj0/13/

Thank you so much Jack.. now, i'm dissecting your code line by line so that i can understand how did you came-up with that idea. Cheers mate!

Hi Rodrigo, mind if i ask? how to reposition the cursor to center? because i tried absolute but it doesn't work. when you hover, the arrow cursor is not in the center. https://jsfiddle.net/qh5e1gfd/2/

Thank you so much Jack, will try this.. thank you so much

Hi Jack, is there an equivalent to $( window ).on( 'load', function() {}); where the animation will execute after the js/jquery and images are loaded? Because, i think $( window ).on( 'load', function() {} ); is deprecated.. Thanks..

And oh, how does the percentage be achieved, while waiting for the js to load? and the percentage will depend on the net connection or the js loaded.. thanks..

Thanks Cassie and Rodrigo.. Will try to experiment with this one later.. Thank you so much and have a great day ahead..

Hi Cassie, i was wondering on how to achieve the percentage and progress bar and show the contents once the progress bar is finished loading all the js components..

Hi Rodrigo, Thanks for the reply. Here's an example of what i want to achieve. https://levora.cuberto.com/ https://www.heights.agency/ and smooth scroll and scroll reveal https://sussextaps.com.au/

Hi is that possible in gsap to have a preloader, then animate everything after the preloader/js assets are done loading? And that preloader will just be shown on the first page only, and if cached, it will not show? I have no working pen on that, just a thought if it's possible? Thank you so much.

hi Jack, apologies for the late response. Try to see the footprint while scrolling.. i want that everytime you scroll, footprints will show.. but my problem is that, after i've added the trigger class in the footer, the spaces on sections increased. here's the video.. i've used this fiddle: https://jsfiddle.net/louiemiguelveloso/de7txkfg/172/ https://www.loom.com/share/f2f5d36925f642d5867a841c31650f4f

The animation that i want to achieve is that, every scroll, foot prints/shapes will display 1 by 1 not activating the pin setting. I've tweak the code in my end and still getting different results not achieving what i want to achieve.

Here's a fiddle which i applied your script and removed the pin https://jsfiddle.net/louiemiguelveloso/de7txkfg/138/ also, the last part didn't even show up.. i have to make the end to 300px so that i can see the whole footprint.

Hey jack, i've applied the code and the animation is a bit delayed and the start and end is sort of mixed up.. here's the screen grab.. removed the pin setting also

Hi Jack, Yes.. this is what i meant.. Been confused with the 'start' and 'end' setting.. Now i know, that you can add multiple class in querySelectorAll method.. thank you so much for this and simplified my code.. thanks a lot! And by the way, do you have a link for a documentation or explanation with regards to this code "gsap.utils.toArray"

Hi, good day. I'm just wondering why my code didn't work. is there something i lack or wrongly implemented? thanks Here's my fiddle: https://jsfiddle.net/louiemiguelveloso/de7txkfg/106/ I want the animation to start from the start as soon as i enter the next screen.. it's like when you enter a specific screen and while scrolling foot steps will appear like walking.

i've customized your code and i don't know why it didn't worked.. here's the fiddle: https://jsfiddle.net/o8tavks3/20/

Apologies Jack.. here.. when the cursor enters on the top portion of the image, the circle will show at the bottom.. seems a bit weird..