Jump to content


  • Posts

  • Joined

  • Last visited


1 Newbie
  1. 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"})
  2. 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?
  3. 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.
  4. 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
  5. 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();
  6. 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
  7. Hey @mikel, That comes REALLY close to what I am trying to achieve. The only problem I can see is that it depends on the minimal height tag in the body/html element. When you remove that tag you'll be unable to scroll and therefore the effect doesn't work anymore. I guess this could be solved with some of the coding in ScrollMagic; for instance a 'pin' element. In the meanwhile I've been doing/watching a lot of tutorials for GSAP and SrollMagic and will show some of my results soon and hopefully come to a conclusion. Greetings, Mark
  8. @PointC I have been looking at those. And every time I try to incorporate a pin into a parallax slider it get's all messed up.
  9. Hey @mikel, Thank you for your example. It does come pretty close as I want it to be. Maybe I'll fiddle around with it some more and see what I can do. In the meanwhile I'll take @Carl's advice and see if I can ask the people on github of ScrollMagic if they can help me. Greetings, Mark
  10. Hello, I am pretty new to GSAP and trying to achieve an effect that might not be possible. I am trying to get a parallax slider to pin when you start scrolling so the parallax layers will show. I would like it so that the images show up as in the .gif and start to display when you scroll. After that you continue to the normal content. I have searched all over the internet but I cannot find a good example or a piece of code that achieves this. ScrollMagic is supposed to be able to handle this but every time I try to apply it the parallax slider gets messed up. Probably I am approaching this in the wrong way and if someone could point me into the right direction that would be very appreciated. The Codepen url directs you to the parallax slider that I have been using as an example. Greetings, Mark