Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by DD77

  1. Hang on one second. I’m so please that everyone is helping out here. I’m just struggling to follow all this options and trying to understand them. I have to use on a really big website some gsap animation. I have a restriction on implementing plugins so that’s why I tried to pick your brains. I will have a look properly tomorrow on my machine as I’m on my mobile right now. 

    Thanks guys really 

  2. @PointC thanks for your help. 

    As you can probably understand I’m a bit struggling to achieve my goal here. 

    I tried to use your code and I adapted but still is not intirely working as I want. 

    I cant use plugins and scroll magic is not an option. 

    Would you please help me to put 2 animated boxes when the elements are in view? 

  3. I have an error on this code that I can't understand why keeps showing. 



    //Inline Promotion GSAP animation
    const threshold = 0.7; // trigger
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: threshold
    const observer = new IntersectionObserver(animHandler, options);
    const ar = Array.from(document.querySelectorAll(".two-column-promo-container"));
    const animations = ar.map(el => (observer.observe(el), new TimelineMax({paused:true})));
    var promoLeft = $(".two-column-promo-float-left .two-column-promotion"),
      promoRight = $(".two-column-promo-float-right .two-column-promotion"),
      featureLeft = $(".two-column-promo-float-left .two-column-feature"),
      featureRight = $(".two-column-promo-float-right .two-column-feature");
    TweenMax.set("promoLeft, promoRight, featureLeft, featureRight");
    // timeline for each section
    animations[0].from(promoLeft, 1.8, {y:-400, opacity: 0.0, delay:0.0, });
    animations[1].from(promoRight, 1.8, {y:-400, opacity: 0.0, delay:1.0, });
    animations[2].from(featureLeft, 1.8, {y:-400, opacity: 0.0, delay:0.0, });
    animations[3].from(featureRight, 1.8, {y:-400, opacity: 0.0, delay:1.0, });
    // observer handler
    function animHandler(targets, observer) {
      for (var entry of targets) {
        if (entry.isIntersecting) {
          let i = ar.indexOf(entry.target);
        } else {


    See the Pen KXLzpV by davide77 (@davide77) on CodePen

  4. @PointC @OSUblake
    Hi Guys, that's amazing! Thanks for looking in to it so deeply. I have to say I got quite lost in here:-) My Initial goal and requirement was making my functionality working without Scrollmagic as I can't add any plugin into the project. I have to figure a way to make Gsap to work within a "inview" function.  If any of you could help me with that would be awesome.

    Please have a look at my demo, https://jsfiddle.net/rsq1o1dw/ doesn't work I want

    lets say that I'd like to achieve an interaction like this page does https://www.apple.com/uk/apple-watch-series-3/