Jump to content
Search Community

Search the Community

Showing results for tags 'function'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. I'm trying to call a function inside GSAP - I'm using React, but I'm getting error in my console: App.jsx:59 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollTo') This is the code: import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; import { ReactLenis, useLenis } from "@studio-freight/react-lenis"; gsap.registerPlugin(ScrollTrigger); const App = () => { const lenis = useLenis(({ scroll }) => { // called every scroll }); const [showSpan, setShowSpan] = useState(true); const mainTitleRef = useRef(null); const secondaryTitleRef = useRef(null); const wavingHandRef = useRef(null); const section1Ref = useRef(null); const section2Ref = useRef(null); useLayoutEffect(() => { pinSection(); animateTitles(); return () => { // Cleanup code when the component unmounts ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; }, []); // Empty dependency array to run once after the initial render const pinSection = () => { // Pin the section when it enters the viewport ScrollTrigger.create({ trigger: section1Ref.current, start: "top top", end: "1200 top", pin: true, markers: true, onLeave: () => { gsap.to(section1Ref.current, { opacity: 0, duration: 1, onComplete: scrollToSection2, }); // Set opacity to 1 when entering the trigger // scrollToSection2(); // gsap.add( function(){ scrollToSection2(); } ) }, onEnterBack: () => { gsap.to(section1Ref.current, { opacity: 1, duration: 1 }); }, }); }; const scrollToSection2 = () => { lenis.scrollTo(section2Ref.current, { duration: 5 }); }; As you can see scollToSection2 is a React function. Thank you for your help upfront!
  2. Hi, I have this timeline playing a simulation of reflection on the water. I wanted to duplicate the timeline, all over the view box. The same SVG object, the same animation but on different locations and playing all at the same time. It is that possible ? I have a test on codepen. Thanks, Sergio
  3. Hello, I was trying to make a hover function with GSAP with timelinemax. In this, there are lists of elements which on hover will take up an x position and moves back to original position on mouse out. But, here, when I move the cursor in between lists items, the animation doesn't stop, but instead, it waits for the previous one to finish. Traditionally in jQuery, this is achieved through stop() method. What can we do here? and how do we do it? Thanks
  4. Guys, I don't understand this, using this simple splitText action inside a function, works fine on codepen but locally getting in browser console: TypeError: undefined is not an object (evaluating 'a.length') Any ideas? Set up is code in a local .js file correctly linked and working with other animations and html elements in index.html exactly as codepen example. 2 a.m. here so that might have something to do with it, not normally this dense... Buzz
  5. Hello everyone at GSAP forum. I appreciate any help with my problem I've been solving some time. There are few things I can't understand. This is my problem: Because I need to use some Tweens or Timelines repeatedly I decided to create functions with these Tweens/Timelines. These functions are appended to Timeline by .call() or .add() (both doesn't works) like this: var myTimeline = new TimelineMax() .add(down) .call(up) .add(TweenMax.to("box3", 1, {autoAlpha:0.2, scale:0.8, ease: Back.easeOut} )) ---------- function down() { var downTween = new TimelineMax() .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } ----------- No function in myTimeline waits for previous to complete - everything plays together - I'm not used to this behavior. I don't wanna use labels or something like that - I need them to chain (first one ends - second starts) as usualy when I add only tweens into timeline. Well, I tried to resolve my problem by some tricks but meet even more problems 1) I tried to use .pause() and then .resume() or .play() in my functions function down() { myTimeline.pause(); var downTween = new TimelineMax() .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } myTimeline.resume(); 2) I tried to use onComplete function down() { myTimeline.pause(); var downTween = new TimelineMax(onComplete:myTimeline.resume()) .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } I don't know why nothing works. What do I do wrong? Can anybody give my some explanation, please? Thanks a lot in advance. Peter
  6. Hi, i have found a function that creates a random shake effect. The effect is now endless but i want to use this function in my timeline for a x amount of seconds. See codepen for the shake effect, below is kinda how i want it to work. function Tween(){ var T = TweenLite.to(".circle",0.02,{x:R(-10,10),y:R(-10,10),scale:R(1.1,0.9),rotation:R(-10,10),ease:Sine.easeInOut,onComplete:Tween}) }; function R(max,min){ return Math.random()*(max-min)+min }; var tl = new TimelineLite(); tl.add(Tween) .to('.circle', 1, {scale:50, y: -30}, "start+=0.5") .from('.circle-2', 0.3, {opacity: 0.0, scale:10}, "start+=0.6") .to('.circle-2', 0.6, {x:100, ease: Elastic.easeOut}, "start+=1.25") .from('.blokker', 0.6, {opacity: 0.0, x:15, ease: Elastic.easeOut}, "start+=1.4"); So this adds the shake effect to my .circle class but obviously this keep going and going. Just like the rest of my timeline i want this effect to last for a x time and then move on with playing the rest of the timeline.
  7. Hi, I'm new to the forums, new to GreenSock GSAP too. So far I'm using it quite effectively with the 5% of what I've worked with I've got a bit of an issue trying to get a small script working. I wonder if anyone can help. The following code effects the x property with a randomisation of 2 possible values (-100% or 100%) which all works great: var wipeAnimation = new TimelineMax() .staggerFromTo('section.panelx', 1, { x:function(){ var randWay = parseInt((Math.random() * 2) + 1); if(randWay == 1) return "-100%"; else if(randWay == 2) return "100%"; } }, {x: "0%", y: "0%", ease: Linear.easeNone}, 1) The issue I have is that I also would like to randomise the property itself between 'x' and 'y' with the randomised value of before (-100% or 100%) var wipeAnimation = new TimelineMax() .staggerFromTo('section.panelx', 1, { function(){ var randWay = parseInt((Math.random() * 4) + 1); if(randWay == 1) return {x:"-100%"}; else if(randWay == 2) return {x:"100%"}; else if(randWay == 3) return {y:"-100%"}; else if(randWay == 4) return {y:"100%"}; } }, {x: "0%", y: "0%", ease: Linear.easeNone}, 1) I'm trying to return both the property and value as one as an object but does't seem to understand. Is there a way to do this? Many thanks Dal1980
  8. 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.
  9. This might not really be a GSAP specific problem, but more a Javascript related one, nevertheless I would like to ask here for help, it that is ok. (The CodePen unfortunately throughs an error, and I do not see the reason why...) I like to save DOM elements to a SETTINGS object like this: ``` var SETTINGS = SETTINGS = { intro: { topics: { singer: { btn: { el: document.querySelector('.c-topic--singer'), params: { right: "5%", onComplete: resetTxt, onCompleteParams: [ SETTINGS.intro.topics.singer.btn.el ] }, }, }, }, }, } ``` The TweenMax then looks like this: ``` TweenMax.to( SETTINGS.intro.topics.singer.btn.el, 2, SETTINGS.intro.topics.singer.btn.params ); ``` The idea is, that the animated element (a button) is set to another position as soon as it is finished. Therefore I'd like to set a self reference in the SETTINGS object in order not to call document.querySelector twice. But that doesn't work as I hoped, and reading up on google I find posts that use a function for callback parameters, but in cases where there is not array needed. So I tried something like this: ``` onCompleteParams: function() { var arr = push(this.intro.topics.singer.btnTxt.el); return arr; } ``` But no success... I am not a JS pro by any means, so I am pretty sure, there is something fundamental I do not grasp about JS objects and self referencing. Maybe somebody of you finds a moment to explain, how I could use such a self reference within an array? And maybe also, if it is in general a good idea to build up such a SETTINGS object, anyway? Or would there be better approaches for SPAs? Thanks in advance! Best, Robert
  10. Hi, Does anyone know why I get an unrecoverable syntax error in JSHint? Below is a script that I have tweaked. The original version was animated. $(document).ready(function(){ $.ajax({ url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml", type: "GET", dataType: "xml", success: function (xml) { $(xml).find("Group[name=9]").each(function () { var belopp = $(this).find("TextVar[name=summa]").attr("value"); belopp = belopp.substring(0, belopp.length-3); $(".jackpot").html('<h3>Just nu '+belopp+'</h3>'); }); } }); }); _________________________________________ The original version $(document).ready(function(){ $.ajax({ url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml", type: "GET", dataType: "xml", success: function (xml) { $(xml).find("Group[name=9]").each(function () { var belopp = $(this).find("TextVar[name=summa]").attr("value"); belopp = belopp.substring(0, belopp.length-3); $(".jackpot").html('<h3>Drömvinsten är just nu <br /> '+belopp+'</h3>'); var txt = $(".txt"); var txtIndex = -1; var playAnimation = 0; function playAgain() { if (playAnimation <= 4) { showNextTxt(); } else { ++txtIndex; $(".endframe").show(); $(".jackpot").hide(); } } function showNextTxt() { ++txtIndex; ++playAnimation; txt.eq(txtIndex % txt.length).fadeIn(200).delay(3000).fadeOut(300, playAgain); } showNextTxt(); }); } }); }); Best, A
  11. Hi! I would like to call animation functions only after the external GSAP file is loaded. I could place the animation functions after the link to GSAP file like this: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script> //my animations </script> ...but I want to load TweenMax.min.js asynchronously and that's the problem: <script async src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> I've googled it and found some kind of solution. The idea is to have a global variable created by the the external script and check whether it exists or not. If it exists, then the external JS is loaded. I found the solution here. So my question is: does TweenMax.min.js create any global variables or objects or whatever I can check the existence of? Thanks in advance!
  12. Guest

    Method onComplete - few functions

    I am new to the study of GSAP. In the study a ready example of a HTML5-game ( GSAP ) I have a question. The method onComplete is passed to one callback function: ... onComplete: oneFunction Is it possible onComplete method to pass multiple callback functions? ... onComplete: firstFunction secondFunction For example, I have a task to hang on one event call multiple functions. Or is this way impossible and the only solution in this case is to call the callback functions in the chain - at the conclusion of one function this function calls another function and so on?
  13. Hello ! Dear guys, I have a problem. My program works llike: I have one animation and when I click on e.g. 'Button1' my animation will change, and second animation will start (in infinite loop like the first). I created an object with coordinates of my polygon points. I start with points[0]. When I click on button1 named 'Warsaw' my function gets current position of each verticles and paste it into new object with coordinates because I want a smooth transition between my animations. So I think: Aha! I kill my old animation, create short new animation (with transition from current coordinates to first coordinates of my second animation), kill short animation and finally create my second animation which will be infinity looped (but until click on the second button). But! When I want to kill my first animation, javascript console says "TweenMax.kill is not a function". I don't know how repair that. Please help And sorry for my english
  14. Can you use GSAP's timeline to execute a javascript function @ certain time?
  15. I need to play HTML5 video in one of the timeline tasks. Something like this: <video class="video"> <source src="video.mp4" type="video/mp4"> </video> tl1.to('.video', 1, { opacity: 1, ease: Power4.easeIn}) // fade in video .to('.video', 0, { play video }) // than play video .to('.video', 1, { opacity: 0, ease: Power4.easeOut}) // wait for video to finish, than fade-out Is it possible?
  16. Hi there, I am attempting to restart the #counter in this codepen example once the timeline has finished playing. Ideally i would like to trigger the restart (20 secs) from the timeline. I added the onComplete: "resetTimer" which is queuing this function and it didn't throw an error so i am wondering if I am on to something? function resetTimer() { var seconds = 20; } Any help is appreciated! Thanks, Phil
  17. Hello I'm just starting with TweenLite and TweenMax. Please accept my apologies for this - I guess - very basic question : I can load external swf on stage using TweenLite or TweenMax but the huge problem (for me :-/) is to get access to loaded content : function, properties, etc. For example, I would like to send orders to a loaded swf to call internal swf functions or properties. In other way I'm seraching for the code who allow a virtual transparency of loaded content in order to interact with loaded content like normal content, on stage. For example I load inside a container swf containing an instance of SlideShowPro inside a container but I cannot find the way to send things like : container.(SlideShowPro-Instance-name).properties = something or call a function inside loaded swf. How to virtualy get access to loaded content as it was on stage ? Thank you very much in advance for your help !
  18. Hey all! I'm trying to animate some pagination elements we have on a company site redesign and am running into some scoping issues (I think). I will start by saying my JS-fu is not great so it's highly possible this isn't so much a GSAP problem as it is a jQuery problem. You can see the core HTML / SCSS here - http://codepen.io/geebru/pen/avRbzw/ And the JS I'm attempting here: // Pagination // Get pagination items function pagerAnimate(play) { console.log("pagerAnimate Activated"); var $this = $(this); var pagerIcon = $this.find('.pagination__icon'); var pagerArrow = $this.find('.pagination__icon__arrow'); var pagerFill = $this.find('.pagination__icon__fill'); var pagerInfo = $this.find('.pagination__info'); var pagerTimelineCore = new TimelineLite(); pagerTimelineCore.to(pagerIcon, '.3', {scaleY: '2'}) .to(pagerArrow, '.3', {scaleY: '.5'}, '-=.3') .to(pagerFill, '.3', {x: '0'}); if (play === 'play') { console.log("pagerTimeline Play"); pagerTimelineCore.play(); } else if (play === 'reverse') { console.log("pagerTimeline Reverse"); pagerTimelineCore.reverse(); } } $('.pagination--previous').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); $('.pagination--next').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); Basically what I'm trying to achieve is to run the Timeline (forward or backwards) based on hover. The tricky part was getting the $(this) declarations per pagination (previous and next) and playing it forward on mouseIn and reversing on mouseOut. The console.log's in there are firing properly, but nothing is animating and I'm getting no errors. Any help would be awesome as GSAP is saving my butt on some of the designer requested animations on our site Thanks! PS - Apologies if this has been asked, but my Google-fu and searching here led me nowhere.
  19. HI, I'm really new to all this, I just looked at the 'Getting Started' video. My question is: is this the right way to get that result (the blue line shrink from left to right in an infinite loop) or there is another/better way to achive this result? At first i tried this code: TweenMax.to(".light", 0.8, {left:0, delay:1.7, ease:Power0.easeOut}); TweenMax.to(".dark", 0.8, {left:0, delay:3.7, ease:Power4.easeOut}); TweenMax.to(".dark", 0.6, {width:0, left:500, delay:4.2, ease:Power0.easeOut}); TweenMax.to(".dark", 0, {left:-500, width:500, delay:5, onComplete:complete, repeat:-1}); function complete() { TweenMax.to(".dark", 0.8, {left:0, delay:2, ease:Power4.easeOut}); TweenMax.to(".dark", 0.8, {width:0, left:500, delay:2.5, ease:Power0.easeOut}); TweenMax.to(".dark", 0, {left:-500, width:500, delay:4}); }; But doesn't seems to works, it only works withouth: repeat:-1 at the end of the line, and repeat only once. I'm sure I'm missing something... Thanks a lot
  20. Hello and thanks and congratulation for this amazing tool. Newbies here, i only know few basics about javascript/jquery but managed -thanks to the extensive documentation and active community- to do what i wanted to do: animate a menu. However i surely haven't done it the cleanest way possible that's for sure, because i collected informations from topics to topics and melted all possible junk of codes in an experimental mix of javascript/jquery.(Soon MIT Licensed). Here is a codepen, there is missing css style so its not particulary pleasant to watch but this is working: http://codepen.io/Rofizzle/pen/myGyJM So, I ended up using a snippet from a greensock demo, because that was exactly what i wanted, however i have never managed to make the reverse method to work, and use another tween to make stuff go in or out, with statements. Is there any way to clean that code with solid reverse method?
  21. First of all, I would like to thank you for the amazing work you're doing with GSAP... it really is an awesome tool and and I really love to work with it Well, I'm combining GSAP and chart.js library to do some animated charts for an online CV and yesterday I ran into a strange issue. I'm usually bringing empty charts (with values of 0) in the screen using timelinemax and then updating the charts value with a callback function (in this case the function updatedoughnuts()) to have a nice animation effect on my charts. var tween6 = new TimelineMax(); tween6.staggerTo(".doughnut", 2, {marginLeft:"0px", ease:Power4.easeOut}); tween6.call(updatedoughnuts); tween6.to(legend, 1, {opacity:1, alpha:1, ease:Quart.easeOut}, 2); function updatedoughnuts() { mydoughnutgraph1.segments[0].value = 120; mydoughnutgraph1.segments[1].value = 30; mydoughnutgraph1.update(); mydoughnutgraph2.segments[0].value = 80; mydoughnutgraph2.segments[1].value = 70; mydoughnutgraph2.update(); alert("the function has been called"); }; The weird thing is that the function is called (I have the alert box) but my doughnut graphs are not updated. But even stranger is that if I remove the callback inside the timeline and call the function outside of it, then it works like a charm (see the codepen that reproduce the error): var tween6 = new TimelineMax(); tween6.staggerTo(".doughnut", 2, {marginLeft:"0px", ease:Power4.easeOut}); tween6.to(legend, 1, {opacity:1, alpha:1, ease:Quart.easeOut}, 2); updatedoughnuts(); I really don't understand this behaviour... I tried different callback with onComplete in the staggerTo or using a delayedCall but I always get the same behaviour. I also used the same method with other types of chart and I had no problem to update the charts values with a callback... Or maybe I just miss somth completly obvious I really hope you guys can help me on this one. Thanks in advance
  22. I am wondering if there is a way to tween essentially the same way as you would using the DynamicPropsPlugin in As3. something like this from your documentation but in javascript. TweenLite.to(myDiv, 3, {dynamicProps:{x:getMouseX, y:getMouseY}}); Secondly would it then be possible (without using a function like above) to reference a dynamic value of another element. I would want the Tween to update if "anotherdiv.width" changed during the course of the animation. Maybe the only solution is using whatever answer there is for my first question? TweenLite.to(div, 1.5, {width:anotherdiv.width}); thanks -ross
  23. hi! i am trying to make ajax page change with jQuery address plugin (http://www.asual.com/jquery/address/) and it works fine. you can see working example of that technique here: http://www.feeldubrovnik.com. i wanted to add some page transition animations with GSAP, so i declared timelines outside the function in which i am trying to call them from, but something i did wrong. here's the (simplified) code: $(function(){ //... // declaring timeline var tl_home = new TimelineMax({paused:true}); tl_home.fromTo($("#home_logo"), 1.2, {scale:.2, rotation:45, autoAlpha:0}, {scale:1, rotation:0, autoAlpha:1, ease:Back.easeOut}); tl_home.staggerFrom($(".feature_box"), .8, {scale:.1, autoAlpha:0, ease:Back.easeOut, transformOrigin:"50% 50%"}, 0.2, "-=0.9"); //... $.address.change(function(event) { //... switch(currPage.name) { case 'home': // calling timeline within function tl_home.play(); break; case 'about': tl_about.play(); break; } //... }); }); i think that it has some scope issue, but i can't figure it. when i declare timelines within 'switch' it works just fine. please tell me what am i doing wrong. tnx in advance.
  24. 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.
  25. hi guys, When I click dave btn and steve btn several times quickly, then the green and red boxes are not expanding the size they should. What do I do to fix this problem? And, how to disable either one while another one is in animation? Thanks a lot. http://codepen.io/7537247/pen/AqLEc
×
×
  • Create New...