Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

9 Newbie

About mado1

  • Rank
  1. @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
  2. 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
  3. 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
  4. @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!
  5. 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.
  6. 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.
  7. 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")
  8. 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.
  9. 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?
  10. 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
  11. 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?
  12. 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.
  13. 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.fro
  14. 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. func
  15. 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 exam