Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DD77

Gsap - Cannot read property 'from' of undefined

Recommended Posts

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

Link to comment
Share on other sites

Your "animations" array only has 1 element but your code is assuming it has 4, thus animations[1].from() breaks. See what I mean?

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Not really sure what you are trying to fix, Jack has answered correctly. Maybe you need to update your demo and add more content to test it.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Ohk, it doesn't show that error on codepen. So neither of us saw it.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

So I have "fixed" it. I referenced post by @PointC in other thread, and kind of just copied certain parts without any knowledge of this IntersectionObserver. But you had multiple issues with the way you were mapping array or even selecting targets. I would suggest to recreate his pen few times by writing each line rather than copy paste to get used to it. (Not being judgemental or anything, I don't know your coding skill level so just suggesting.) As for any detailed answers wait for him or Blake to respond.

 

See the Pen JrqJGz by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Look for options being declared twice, remove one of declaration.

  • Like 2
Link to comment
Share on other sites

Just to clarify your original question. The animations array only had 1 element in it so when you were using animations[1].from(), which is a GSAP method. You were getting that error as there was no element at index 1.

  • Like 3
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Hi @DD77 :)

 

I'm not seeing any console errors in your pen. Does that mean this is now working the way you'd like? I know you're using my code from your other thread as a reference for this, but please keep in mind that was only my first experiment. You may want to go through the docs for a better understanding. I'd also urge a bit of caution using the Intersection Observer depending on what browsers you need to support.

 

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility

 

You always have the option of using ScrollMagic or using Shaun's answer from your other thread.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

As far as I can tell, everything is working correctly. With a threshold of 0.7, you're saying "when 70% of this element is in view, fire the animation." Right now, both of your elements are 100% in view on page load so they both tween immediately.

 

Here's a fork of your pen. I just put in a big gray spacer to shove the elements down the page. Now when you scroll, they animate when they come into view.

See the Pen gGJxJQ by PointC (@PointC) on CodePen

Is that what you meant?

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

It may not work correctly on mobile. I haven't done any testing beyond some desktop browsers. That's why I urged some caution in my post above. I'm not sure that the Intersection Observer is ready for prime time yet as it's still experimental technology.

 

https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Yup, It won't work on IOS /safari and many modern browsers either. You will need to use polyfill which seem to support older browsers upto IE7 as well. Again, if you are just practicing then it is fine but if you are working on some project, you are better using ScrollMagic unless polyfill works for you.

 

http://caniuse.com/#search=intersec

 

Also, just curious why you don't want to use ScrollMagic?

  • Like 4
Link to comment
Share on other sites

There's a polyfill for pretty much everything, so I wouldn't worry about that. Check out Polyfill.io. Just include this script, and it will return all the polyfills that are suitable for your browser.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

 

I haven't had a chance to dig into the Intersection Observer API yet, but I will.

 

Here's a demo using a technique that intersection observers were pretty much designed to replace. Calling getBoundingClientRect 600 times on a scroll is not a good idea, and I wouldn't do that on a real project, but I was just trying to show how it works with as little code as possible. 

 

 

 

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

What do you mean it doesn't work? I don't post code that doesn't work.

 

That demo is responsive and more than safe. I was only talking about the fact that I didn't optimize that demo because I was trying to dumb down the code as much as possible.

 

There are 600 elements that I'm checking individually, but I wouldn't do that in that real project. There are 75 rows, so I would just check if a row was in view, reducing the number of checks by a lot.

  • Like 3
Link to comment
Share on other sites

Everything in @OSUblake's demo seems fine to me.

 

We're straying pretty far from GSAP support in these threads. Just so we can all stay on the same page:

 

@Shaun Gorneau provided a solid possibility in your other thread. @OSUblake has provided his demo with a tested option.  I've shown you how to do this with ScrollMagic and the Intersection Observer API. The only thing we haven't really tested in the real world is the Intersection Observer polyfill. Are you saying none of these options works for you? Have you tried the polyfill yet?

 

Thanks.

  • Like 2
Link to comment
Share on other sites

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 

Link to comment
Share on other sites

I wasn't suggesting that you weren't. I'm just trying to wrangle all the ideas in one place since this question has spanned two threads with lots of posts and a lot of options have been thrown out here. We normally try to keep the forum focused on GSAP support. Obviously, that can get away from us sometimes so we just need to know what you've tried. 

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×