Jump to content

mikel last won the day on August 10 2019

mikel had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by mikel

  1. Hey @qqignatqq You mean the space under the last GreenSock? If you do not like this, take another approach. https://codepen.io/mikeK/pen/dybMdpx var action = new TimelineMax({paused:true}) .to('.wrapper',1,{y:-wrapperHeight+350, ease: Sine.easeInOut}); Best regards Mikel
  2. Hey @qqignatqq, don't be confused ... https://codepen.io/mikeK/pen/MWgyOrg // !!! for up / down same ease !!! if (scrollNum > lastScrollTop) { TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut}); } else { TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut}); } Thanks ZACH. Happy tweening ... however you wish it ... Mikel
  3. Hey @qqignatqq, Please note the easings // !!! different eases for up / down scroll !!! if (scrollNum > lastScrollTop) { TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut}); } else { TweenLite.to(action, 1, {progress:progress, ease: Power0.easeNone}); } Try another ease that fits more to what you expect. Kind regards Mikel
  4. Hey @sumith, sorry too fast. Here a quick fork ... https://codepen.io/mikeK/pen/LYPGMva Does that help? Mikel
  5. Hey @sumith, Welcome to the GreenSock Forum. Maybe these examples will help you further. Here is the duration of the scene set to a very high absolute value: https://codepen.io/mikeK/pen/VNxpPB Here's an alternative to scrollMagic https://codepen.io/mikeK/pen/BXNOgN Happy tweening ... Mikel
  6. Hey, In the pen above, I added a svg with an "o".
  7. Hey @grensesnitt, Welcome to the GreenSock Forum. I do not know what's wrong with your svg. If you need a simple O, try it here ... https://codepen.io/mikeK/pen/oNvbWEb Happy tweening ... Mikel
  8. Hey @Daniel Hult; Challenge not quite fulfilled ... https://codepen.io/mikeK/pen/QerqoV Happy tweening ... Mikel
  9. Hey @sammyg, Waves are welcome guests here in the GreenSock Forum ... https://codepen.io/mikeK/pen/KORMKE Happy tweening ... Mikel
  10. mikel

    Scroll Magic IE11

    Hey @Antoniopf, ScrollMagic is not a GreenSock product nor is it officially supported here on the GreenSock website or forum. Maybe you can find help here: ScrollMagic/issues Kind regards Mikel
  11. mikel

    Scroll Magic IE11

    Hey @Antoniopf, Welcome to the GreenSock Forum. It would be a huge effort to study a complex web for problems. Therefore, the friendly request to show a reduced case in which problems are visible in a CodePen. Kind regards Mikel
  12. Hey @Donatello666, Welcome to the GreenSock Forum. Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through. More info: Stagger effects with cycle https://codepen.io/mikeK/pen/qeoMZM Happy tweening ... Mikel
  13. Hey @LeoZ, Just for fun - a simple version ... https://codepen.io/mikeK/pen/KOQjMw Happy tweening ... Mikel
  14. Hey @DTales, Without seeing the case, it is not easy to give advice. Please provide your (reduced) case in a CodePen. Just one option: Set the body so that there is enough space. E.G. body height = content height + 200px Happy tweening ... Mikel
  15. Hey @hando, If it should be a simple animation ... https://codepen.io/mikeK/pen/eqVzRW Happy tweening ... Mikel
  16. It's like a gear: the ratio of WrapperHeight and scrollDistance as well as the easing define this special scroll animation. An easing example: https://codepen.io/mikeK/pen/vopoyO
  17. Here: #scroll width:100% https://codepen.io/mikeK/pen/XvVOoj Play with the code and learn which change triggers which effect. I tried different eases for down / up scrolling ! Happy testing and learning ... Mikel
  18. Hey @qqignatqq; I totally do not understand your intention, your problem. Just adjust the div #scroll to the #container ... https://codepen.io/mikeK/pen/LweMqG (If you want to see the scrollbar: #scroll width: 100%) Happy scrolling ... Mikel
  19. Hey, maybe this concept could be helpful ... https://codepen.io/mikeK/pen/BXNOgN https://codepen.io/mikeK/pen/PMOyZB Happy tweening ... Mikel
  20. Hey @sashaikevich, Here is a slightly different approach (NO scrollMagic) - quite magical ... https://codepen.io/mikeK/pen/BXdbjQ Happy scrolling ... Mikel
  21. Hey @five.design, <button>: I moved the button in the html to activate it. Here is another suggestion: one of my first steps with GSAP - @OSUblake and the Forum team helped me a lot. https://codepen.io/osublake/pen/ZbPxjN Maybe it will help you - especially the matchMedia effect. Happy tweening ... Mikel
  22. Hey @lzy100p, Maybe you try the AttrPlugin: https://codepen.io/mikeK/pen/QXXNJj Happy tweening ... Mikel
  23. Hey @nicmare, Take a look at this: https://greensock.com/forums/topic/19706-staggering-data-from-multiple-arrays Or: https://www.amcharts.com/ Kind regards Mikel
  24. Hey @lzy100p, Clip-path is not a feature that all browsers support (that has nothing to do with GSAP): https://caniuse.com/#feat=css-clip-path Kind regards Mikel
  25. Hey @nicmare, These examples should give you some suggestions: https://codepen.io/mikeK/pen/dwooWw https://codepen.io/mikeK/pen/XwKbeE https://codepen.io/mikeK/pen/REXaxq If you have any questions about using GreenSock, feel free to contact us. Happy tweening ... Mikel