Search the Community
Showing results for tags 'scope'.
-
Hello dear GSAP community. I face a challenge, trying to use "useGSAP" hook and define one reference to main element as scope. I would like to call functions from useGSAP hook but... i still want to respect scope for element selectors. When i target any element to perform .to(), i would like to search that element inside my scope. Currently i feel like i am breaking the code with given approach and once i call functions outside useGSAP then scope is also lost. Can someone aid me with this logic to make right decisions. Thank you to all great professionals out there ? const Home = () => { const mainRef = useRef(null); ... // example of usage const func1 = (tl: Timeline, mainRef: MainRefType) => { const homeIntroSubTitle = `${mainRef.current} .home__intro h2`; const homeIntroButton = `${mainRef.current} .home__intro-button`; const homeFeatureItem = `${mainRef.current} .home__feature-item`; gsap.set([homeIntroSubTitle, homeIntroButton, homeFeatureItem], { y: -10, opacity: 0 }); tl.to(homeIntroSubTitle, { y: 0, opacity: 1, duration: 1 }, 0); tl.to(homeIntroButton, { y: 0, opacity: 1, duration: 1 }, 0); tl.to(homeFeatureItem, { y: 0, opacity: 1, duration: 1, stagger: 0.3 }, 0); } useGSAP(() => { const tl = gsap.timeline(); func1(tl, mainRef); func2(mainRef); func3(mainRef); }, { scope: mainRef }); return ( <main className='home' ref={mainRef}> ... ) }
-
Hi all, I'm trying to apply an animation to a certain scope only, using useGSAPs scope option. The weird thing is, on my local react project it only works, if I add ".current" in {scope: ref.current}. Then, however, it also affects elements outside of the scope. If I only write {scope: ref}, the elements outside the scope aren't affected, but neither are the ones inside the scope. I tried recreating the issue in this stackblitz, but here's it's working as intended ?? https://stackblitz.com/edit/react-avrbpg?file=src%2FApp.js Any idea, what I could be doing wrong locally? I checked a million times that the ref is on the right div...
-
Greetings Greensock community I have a "simple" question, which i cannot for the life of me figure out on my own. In Angular, i have several methods in my component, it could be "closeEverything()", normally i call such function with "this.closeEverything()". Now, when i try to call such method in a TweenLite.to onComplete callback, it says undefined function. So far so good. Greensock does not know anything about the Angular scope, and i reckon Angular does now know anything about the Greensock scope. Now from what i have read, i might be able to change the scope Greensock uses in the onCompleteScope property, but i have not been able to make it work. Does anyone have an example, where out-of-scope functions are being called in Tween callbacks? What is it i am missing, i feel like a complete newbie again, trying to implement this otherwise awesome library into my existing Angular application. /Balslev
-
Hi Is there any way to make a timeline that is inside a function accessible outside of it? I have a short animation sequence used in different places on a site. I'd like to wrap the timeline in a function, but the problem is I'm also using scroll Magic. Thus the setTween method of scrollMagic needs you to pass the name of the tween in as a parameter. I tried using return with the timeline name (as return myAnimation) at the end of the function, but this didn't work. I've set up a simplified example codepen (link given above and minus the scrollMagic) to make it easier to illustrate any solution. I'm thinking there must be a way to make a timeline accessible outside of a function? Any help would be amazing. Emily.
-
When calling TweenLite.killDelayedCallsTo on a method of an object, all objects with the same prototype will have there delayed calls to that method killed. Cause: When no scope is bound to the method, the method is really the same function object shared by all instances of the prototype. So they will all be killed by 1 call. Solution: Bind your callbacks using .bind(this) or use a closure and place the bound function/closure in a variable. Then, later you can call TweenLite.killDelayedCallsTo on the bound callback. A second argument in TweenLite.killDelayedCallsTo for specifying scope would also be nice, just like with the onCompleteScope etc in TweenLite.to/.from. That would save us a lot of binding and storing functions, and would be in line with the other static TweenLite methods.
- 3 replies
-
- killdelayedcallsto
- bug
-
(and 2 more)
Tagged with:
-
Hello, Is it possible to pass $(this) into a timeline so that I can access $(this) as well as the data attributes of an object? In the example pen I'd like to pass data attribute values from buttons into the timeline, ultimately to fade between two images - only after they have each fully loaded. Thanks.
-
Hello. I am trying to use GSAP with node.js WITHOUT polluting the global scope. I am ussing nw.js (so, I have available the window object) First I do: npm install gsap --save Then in my Tween.js: var gs = window.GreenSockGlobals = {}; require('gsap'); console.log(gs); // logs empty object console.log(window.GreenSockGlobals); // logs empty object console.log(window); // logs the window object, with ALL the GSAP stuff in it console.log(window.TweenLite); // logs tweenlite object I don't want to have all the GSAP stuff in the global scope. I want to have it in a specified object. Thanks.
-
Hi everyone! Lately i had a discussion with one of my coworkers about this issue: I have object named MyObject with method named launch. On every launch method call, method searches for TweenMax at global scope. Normally i would do: MyObject.launch = function(){ var domName = "#dom-" + String(Math.round(Math.random()*100)); TweenMax.to(domName,1,{x:200}); } Problem begins, when this method fires on every user scroll, which can be A LOT (especially in Firefox). My question is this: Isnt better to create an instance of TweenMax as a property of MyObject like this to reach better performance? MyObject.TweenMax = TweenMax; MyObject.Math = Math; MyObject.launch = function(){ // Fires VERY often var Math = this.Math, TweenMax = this.TweenMax, domName = "#dom-" + String(Math.round(Math.random()*100)); MyObject.TweenMax.to(domName,1,{x:200}); } In this scenario i would completely avoid of any global scope reaches. Please keep in mind performance-friendliness. However i still have a bad feeling, that this is not a good approach, but I dont know why. Any of your comments are deeply appreciated.
-
I want to animate something (the position of the background image) of a div when the user hovers over (mouseovers) it. There will be several of these divs on a single page. It would be REALLY nice to be able to specify classes, not IDs, of DIVs, when constructing greensock timelines, but as that's impossible I've had a stab at it in this jsfiddle: http://jsfiddle.net/cheolsoo/mp3qes6n/ 1/ why doesn't the (global) value of i get set when the mouseover event fires? I initialized i to 611 but it doesn't change when I mouseover one of the other divs. 2/ (much less critical as I can work around it) my fiddle works (sort of) because I stripped "vid_" away from the div ID and then added it back in the TimelineMax definition. I tried simply passing a variable (e.g. i where i='vid_611' rather than '611') instead of "vid_"+i, but then nothing worked at all. Why not? (Is that a greensock question or a Javascript question? I'm such a moron I'm not even sure.) thanks, eh Ryan
- 4 replies
-
- javascript
- scope
-
(and 2 more)
Tagged with:
-
Hi all, I'm doing a front page with 5 animations where one fades away in place of another, and so on, and then it loops. Rather than write one enormous hideous looping timeline I thought I'd make each of the animations a separate timeline and use callbacks to trigger subsequent timelines and JQuery to fade the relevant DIVs in and out. A condensed version of my code is below. The callbacks work great until I get to the last animation (vr_pan5). It fades in the DIVs required to replay the first animation, but then doesn't restart the first animation (vr_pan1). I tried shuffling the order of the timeline declarations in the code. The issue seems to be an inability to play a timeline at the top of the code, after having played a timeline further down. I also tried moving code in and out of the window.load function, but that didn't make a difference either. Sorry for asking what is essentially a Javascript question and not a Greensock question! Also, sorry for not creating a codepen; I figured a glance at my semi-pseudocode would be enough for someone enlightened. Code follows: var vr_pan1, vr_pan2, vr_pan3, vr_pan4, vr_pan5; vr_pan5 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg5", "#bg5", "#fg1", "#bg1", vr_pan1]}); vr_pan5 .add("start") //tween some stuff ; vr_pan4 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg4", "#bg4", "#fg5", "#bg5", vr_pan5]}); vr_pan4 .add("start") //tween some stuff ; vr_pan3 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg3", "#bg3", "#fg4", "#bg4", vr_pan4]}); vr_pan3 .add("start") //tween some stuff ; vr_pan2 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg2", "#bg2", "#fg3", "#bg3", vr_pan3]}); vr_pan2 .add("start") //tween some stuff ; vr_pan1 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg1", "#bg1", "#fg2", "#bg2", vr_pan2]}); vr_pan1 .add("start") //tween some stuff ; function nextAnim(fadeout_div1, fadeout_div2, fadein_div1, fadein_div2, new_anim) { $(fadeout_div1).fadeOut(); $(fadeout_div2).fadeOut(); $(fadein_div1).fadeIn(); $(fadein_div2).fadeIn(); var o = new_anim; o.restart(); } $( window ).load(function() { vr_pan1.play(); }); Thanks, eh.
- 4 replies
-
- javascript
- timelinemax
-
(and 2 more)
Tagged with:
-
Hello, I'm using Draggable with onDragEnd and onDragStart events to perform some tasks. In order to complete the onDragEnd tasks I need some variables defined inside the onDragStart function be visible inside the onDragEnd function. I see that's the purpose of onDragStartScope but it's not very explicit on how actually do that. Can you clarify this a bit more please? Thank you, your help will be appreciated.
-
hello.. has anyone used the delayedCall() method with scope? I looked in the API but was seeing if anyone had an example they might want to share.. i was trying to pass an element to use for the scope of this in the function, but im probably missing something in how its implemented any help will be highly appreciated, thanks