[ScrollTrigger - Auto start]

Thank you! I'll give it a go.

 

Your animation is exactly what I was trying to achieve.

[ScrollTrigger - Auto start]

21 hours ago, Cassie said:

No laughing here! We love seeing what people come up with

Hey folks. This is what I created before I learned about rotate and so forth:

 

See the Pen gOeqLjb by MacCready (@MacCready) on CodePen

[ScrollTrigger - Auto start]

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.

[ScrollTrigger - Auto start]

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!

[ScrollTrigger - Auto start]

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😀

[ScrollTrigger - Auto start]

1 hour ago, mvaneijgen said:

@MacReady it would had been nice if you tried your hand at any possible solution. I find that learning something is done by getting your hands dirty and not by having others give you the solution. Next to that if you try something and show what your thought process is others can point out where you went wrong or show you a better way.

 

Here is a basic animation. Right now they randomly rotate between -100 deg and 100deg and they move left or right also between -100 and 100. You could of course change these values or have each box animate a specific amount, you could use the wrap function for that  https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() and feed in the index of each element. 

 

let yourWrap = gsap.utils.wrap(["-5", "100", "200"]);

rotate: index => yourWrap(index)

 

 

 

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?

[ScrollTrigger - Auto start]

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.

[ScrollTrigger - Auto start]

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

[ScrollTrigger - Auto start]

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.

[ScrollTrigger - Auto start]

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/

 

See the Pen XWEoqmm by MacCready (@MacCready) on CodePen

[ScrollTrigger - Auto start]

Okey dokey. I'll set up a simple CodePen but I will try to achieve the effect and post my results.

[ScrollTrigger - Auto start]

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.

[ScrollTrigger - Auto start]

6 minutes ago, Cassie said:

If you're just talking about the same as the demo you linked to - then that's exactly what my code snippet would do. - like so
 

 

 

Similar but the images actually fade out and at different angles. I'll have a play

[ScrollTrigger - Auto start]

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",
  }
});

 

[ScrollTrigger - Auto start]

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.

[ScrollTrigger - Auto start]

Hi there,

 

I found a great example of what I want to achieve below (check out the mobile phones and the way they animate):

 

https://www.mwb-agency.com/

[ScrollTrigger - Auto start]

Hi All,

 

I am a complete novice when it comes to GSAP. I've been reading through the various documentation and watched a couple of videos. I'd like to know how I could activate an animation as soon as the mouse or scroll wheel is moved. I'm using the following code to animate six images. It works when the trigger point hits the top of the view port, I don't want that to happen I want the animation to commence as soon as the mouse/scroll wheel is moved.

 

let tl = gsap.timeline({
    // yes, we can add it to an entire timeline!
    scrollTrigger: {
      trigger: ".container",
      pin: true,   // pin the trigger element while active
      start: "top top", // when the top of the trigger hits the top of the viewport
      end: "+=500", // end after scrolling 500px beyond the start
      scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
      snap: {
        snapTo: "labels", // snap to the closest label in the timeline
        duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
        delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
        ease: "power1.inOut" // the ease of the snap animation ("power3" by default)
      }
    }
  });

// add animations and labels to the timeline
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");