DD77

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 

@OSUblake thanks. I have to use it in a project, I have to use the safest code possible.  Also has to be responsive. 

Your demo doesn’t seem to work. 

@PointC thanks that’s a really good explanation. I’m with my mobile now and looks like it doesn’t work.  

@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? 

Thanks. 

Regarding the options being declared twice, I can’t access the other one, I can only change my options. But how can I change it? On what? 

Sorry but I’m not that gray with this coding. 

thanks for you help.  I've now have on my code this error, Uncaught SyntaxError: Identifier 'options' has already been declared, any idea how to fix this?
sorry but I have to deal with lots existing code

yes it does on the console, if you inspect in chrome and use the console you can see the error

@sahil well the error is quite clear, I need to understand why I have the error Cannot read property 'from' of undefined 

@GreenSock I got the issue, I think is because I'm trying to animate to element on the same time. How can I fix this? 

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

//Inline Promotion GSAP animation
console.clear();
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);
      animations[i].play();
     
    } else {
        return;
    }
  }
}

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

@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/

thanks, really nice, but I can't understand why the first element (which is in view) in not showing. I need to scroll in order to make it fading in. Also, I'd like the 3 elements to have different (possibly) animations, so di should be within a variable

Could you help please?

Thanks, I have made the demo with with scrollmagic but  is not perfect. The element should be triggered only once not up and down also the first element is not responding properly. Feeles like I do one step forward and two backwards..

thanks, but doesn't work as I want. In here all elements runs in the same time and I need the animation to happen when the get in view. So I still need my in-view class and I need to trigger (separately) all the elements

I need to make working this functionality,  basically I need to trigger the GSAP function when the element is in viewport. 
I'm adding the class and is going all fine, but then I need the function to  work on the elements and animate them. 

I don't intend to use Scrollmagic 

See the Pen qPLoKP?editors=1010 by davide77 (@davide77) on CodePen