Jump to content
Search Community

delayed execution of function with .add - changing scope

kalreg test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

 

After a while messing with gsap i am back with problem creating a certain animation. I guess it is more general problem with oop programing, however i count on your help.

Main problem is that codepen works as it should, and if i run it in my browser it behaves differently.  Here's the description of problem.

 

I have object pop that maintains allfunction for #pop DOM element like creation, different slides, closing and so on. I want to have it divided for different methods for opening  and closing before between them there are different functions.

 

In my pen i want to remove #pop element from DOM with this.closePop() function after a while. But if i call it like this:

 


   this.closePop = function() {
           var tl = new TimelineMax();
           tl.add(this.slidePopOut())
           tl.add(this.removePop(), 2)
     return tl;
   }

 

function this.removePop is executed immidiately so it is removed before animation is started. If I change it to:

 

   this.closePop = function() {
           var tl = new TimelineMax();
           tl.add(this.slidePopOut())
           tl.add(this.removePop, 2)
     return tl;
   }

 

in pen it works good - element is removed at the end in animation, but in my browser it is not. Why? Because this.removePop is called with this which is Timeline object, not popClass object. So it returns error  that removePop is undefined for timeline obj.. it is correct, but why does it change scope?

I understand that it is hard to help me if pen works as it should but maybe you have some ideas that may pupush me into write direction.
Kalreg.


EDIT: i put here second codepen, shorter so maybe it would be easier to discover the problem:
 

See the Pen KvOwKM?editors=1111 by kalreg (@kalreg) on CodePen

 

Func2 is called in timeline obj context so it cant call this.func3  - please check your own console.log. Here this error "works" so maybe it will be easier to help me:)





DID IT BY MYSELF - TimelineMax.call() did the job. Thank you!

See the Pen qXeWgN?editors=1111 by kalreg (@kalreg) on CodePen

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.
×
×
  • Create New...