• Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About mado1

  • Rank
  1. 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. 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();
  2. 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
  3. 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
  4. @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.
  5. 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
  6. 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