MacReady
MacReady's Achievements
-
-
-
Rare
-
Rare
-
Rare
Recent Badges
2
Reputation
-
Thank you! I'll give it a go. Your animation is exactly what I was trying to achieve.
-
Hey folks. This is what I created before I learned about rotate and so forth: https://codepen.io/MacCready/pen/gOeqLjb
-
Does anybody know why the 'Run' button in CodePen is not showing? Created a fresh Pen and the option is no longer there. Incredibly frustrating and CodePen offer no solutions.
-
That's a relief! As I mentioned I am a complete novice and studying Javascript in my spare time. I was attracted to GSAP since I'm a creative, look forward to getting the hang of it!
-
Ah I see now! Thank you for your help it is much appreciated. I will post my version I came up with last night. Please try not to laugh?
-
I am not understanding the wrap method. How do I target individual elements so they have specific rotational values applied on scroll? Do I pass the four boxes in as an array?
-
I wouldn't call it a disaster I'm a complete novice and three hours included watching tutorials and trying out various other solutions. All part of the learning curve. The biggest hurdle was triggering individual elements so they rotate at different angles. I'll post my efforts later on this evening.
-
It was actually done on a live staging site. Not the cleanest of code I have to say! I'm working my way through the various videos and documentation. The penny's beginning to drop
-
I did actually have a go last night I spent roughly three hours trying to achieve the effect so I'm not here to expect others to do the work for me and I'm something of a novice when it comes to website animations. Thanks for the advice.
-
I've set up a very basic CodePen. As mentioned previously I would like the elements to fade in and out on scroll and animate as per the example below. https://www.mwb-agency.com/ https://codepen.io/MacCready/pen/XWEoqmm
-
Okey dokey. I'll set up a simple CodePen but I will try to achieve the effect and post my results.
-
Ok thanks although the website I linked to is the effect I'm trying to achieve, I can't really provide a CodePen because I don't know how to achieve the effect.
-
Similar but the images actually fade out and at different angles. I'll have a play
-
Indeed. Sorry I'm at work at the moment. Also toggleActions doesn't seem to work animation plays without reversing. let tl = gsap.timeline({ // yes, we can add it to an entire timeline! scrollTrigger: { start: 0, // when the top of the trigger hits the top of the viewport end: "+=500", // end after scrolling 500px beyond the start toggleActions: "restart pause reverse pause", } });
-
Great thanks for the advice. Although I want my animation to start as soon as the mouse wheel is activated. BTW setting the start position to '0' doesn't change the behaviour the image is pinned and the animation only triggers when it hits the top of the viewport. I will set up a CodePen later on. Thanks for your help though much appreciated.
