mado1

@sgarbidonna no problem jajaja (eres Mexicano?) I think ScrollTrigger will help you a lot and is much easier to understand! You can also have a look at this page where they show a lot of examples for ScrollTrigger: https://codepen.io/collection/AEbkkJ

And of course as @ZachSaucier says, GreenSock now has it's own library for scroll triggers. If you'd like you can take a look at a codepen I made recently with ScrollTrigger https://codepen.io/monsmado/pen/oNbLeZW

Hey @sgarbidonna, Holy moly, you're replying to an old topic haha. No problem though! I've figured a lot myself out since then and am glad a codepen example helped you out. The thing is, it would be better if you upload/make a codepen as well so we can have a look at it. Screenshots with code usually aren't good to help you because we are not going to try and re-create your issue for you. So my advice is to go to codepen (make an account) and share it with us

@GreenSock, Thanks for the help. Indeed I loaded the wrong plugin at first but then went to the documentation page for ScrollTrigger and realized that haha. Also the relative value helped with getting the animation to work on scroll!

Hello, Does ScrollTrigger work with SVG's? I am trying to animate an SVG with ScrollTrigger like so: gsap.timeline({ scrollTrigger: { trigger: ".phone", start: "center bottom", end: "top top", scrub: true } }) .to("#back", { y: 178 }, 0) .to("#mid1", { y: 83 }, 0) .to("#mid2", { y: 48 }, 0) The thing is that it does not work and instead just applies y position and nothing else. I've included a codepen for a demo.

Hello @mikel, How can I make it more floating/hovering in your example the dots move around the x and y one after each other. In the example https://codepen.io/monsmado/pen/bGEdaLB they float more and move around the z and y simultaneously.

Quick question though, In your example you use utils.toArray("circle") To target <circle cx="50" cy="50"/> <circle cx="100" cy="80"/> etc. How can I target only circles that have a class or id? for example: <circle id="circleS" cx="100" cy="80"/> <circle id="circleS" cx="200" cy="120"/> <circle cx="300" cy="50"/> <circle cx="300" cy="130"/> <circle cx="250" cy="100"/> Never mind, just add #circle to utils.toArray("circle")

Thank you @mikel, That was exactly what I was looking for. Sometimes it's hard to find what you're looking, especially if the effect does not have a very defined name. But this will help me a lot.

Hello, I am trying to create an effect as in the gif below. I've searched all over the 'ol internet but cannot figure it out. How can I randomize it for all dots though?

Well at the moment that part: .to ('.iphone1-img-behind', 3, {x: "-50%", ease:Power4.easeOut}) .to ('.iphone2-img-behind', 3, {x: "50%", ease:Power4.easeOut}, "-=3") comes right after another animation. So I guess I have to pinpoint exactly with let’s say 50% of the viewport. There’s no way I can run or trigger it after this has happened: .to ('.iphone1', 3, {x: "-54%"}) .to ('.iphone2', 3, {x: "54%"}, "-=3") .from ('.iphone1-text', 0.3, {autoAlpha: 0}, "-=3") .from ('.iphone2-text', 0.3, {autoAlpha: 0}, "-=3") .to ('.iphone1-text', 3, {x: "-30%"}, "-=3") .to ('.iphone2-text', 3, {x: "30%"}, "-=3") .set ('.iphone-stick', {display: "block"})

Ok I think we are getting closer to understand each other now. So I create a new scene with a new timelinemax then add this in there: .to ('.iphone1-img-behind', 3, {x: "-50%", ease:Power4.easeOut}) .to ('.iphone2-img-behind', 3, {x: "50%", ease:Power4.easeOut}, "-=3") then I can trigger it. How would I trigger it so that it will be in-sync with rest of the scroll scene?

Ok so here is my codepen for what I have been working on: https://codepen.io/monsmado/pen/YbpYQN I have re-created the effect of the original landing page. In the original page this: .to ('.iphone1-img-behind', 3, {x: "-50%", ease:Power4.easeOut}) .to ('.iphone2-img-behind', 3, {x: "50%", ease:Power4.easeOut}, "-=3") Will run by itself, without scrolling. The animation plays by itself. And I have no idea how to fix that because now it only works when you scroll. But the idea is that they slide by them self when those elements are being triggered. I hope I have clarified myself a bit better now here.

Hello, I am trying to figure how to run an animation within a scene that has a duration. In the codepen example the duration is set to: duration: "100%" That makes it so that the whole scene will be animated when you scroll. Now for example; I want to to keep the scroll animation for the line (#theLine) but want to play/run the alpha and ease animation of the circle (#theCircle) by itself when we are hitting that element. I want to run the animation of the alpha and ease automatically from #theCircle when that element comes in lineAnim.fromTo("#theLine", 1, {drawSVG:0}, {drawSVG:"100%", ease:Linear.easeNone}); lineAnim.fromTo("#theCircle", 0.1, {scale:0, autoAlpha:0}, {scale:1, autoAlpha:1, ease:Linear.easeNone}, 0.5); I have been looking all over the forums and looked into tutorials but I cannot find anything that helps me. Most of the examples are animations when the element is in the viewport. Greetings, Mark

Hey @mikel I have updated my my codepen because indeed you were right about the layers shifting through the y-axis. Looks a bit better now. Still have to find a solution to as what you did in your new example so that there is no alpha/fade effect towards the next content. https://codepen.io/monsmado/pen/LvGdNa Greetings, Mark edit -- I came across this code in this topic: This might help doing the trick that I am looking for? I am not sure as there is no demonstration of what this exactly does. function setupAnimations() { var progress = $('.fill-bar'), show = new TimelineMax() .set(progress, {scaleY: 0, transformOrigin: "center top", ease: Power0.easeNone}) .to(progress, 1, { scaleY: 1, transformOrigin: "center top", ease: Power0.easeNone}); var timeline = new ScrollMagic.Scene({ triggerElement: "#timeline", duration: $(window).height() * $('.period').length, triggerHook: 0 }) .setPin("#timeline", {pushFollowers: false}) .setTween(show) .addTo(controller); thing.each(function(index, elem) { new ScrollMagic.Scene({ triggerElement: elem, triggerHook: "onLeave", offset: $(window).height() * -1 }) .addTo(controller) .addIndicators({name: "period marker"}); }); } setupAnimations();

Alright so here is an example of what I am trying to achieve. It is nowhere near perfection but you get the idea. I have incorporated everything I've learned these couple of days and came up with this. @mikel was really close and as I stated in my previous post his example makes the effect work because of the minimal height of 250%. I now know that even with ScrollMagic it is basically the same because you adjust the duration of the pinned scene. The example above still has many issues to be solved. I guess what I want is more like this as per @mikel's earlier example. This would mean I've to learn how to animate in canvas I guess? So I guess until I get more info I would like some more info on how to start with an animation as in the example "Run animation by scrolling - 04" Because that is exactly what I am looking for but need to figure out if there are some nice tutorials for that or if someone could somehow show me how to that over here. Greetings, Mark