Search the Community

Showing results for tags 'javascript'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 207 results

  1. Mahmoud16

    Jest, Enzyme and GSAP

    Hi all, Not sure if i'm missing something or if I'm doing something incorrect. But I'm trying to run simple unit tests with Jest and Enzyme on my component that uses gsap for a search input box. The component works perfectly fine, animation is great too. But whenever i run my tests, and specifically this line component.find('#close').'click' i get ERROR CANNOT TWEEN A NULL TARGET the close button calls this function below: animation.hideSearch(this.searchInput) animation.hideSearch is: hideSearch(target){ return TweenMax .to(target, duration, { opacity: 0, display: 'none' }) }, And finally here is my search input: <input id='search-input' className={styles.input} value={this.state.searchValue} onChange={this.handleSearch} ref={div => this.searchInput = div}/> Is there anything i need to configure in order to get jest to ignore the gsap animation? Any help is appreciated. thanks!
  2. I've recently got lucky with an answer from PointC in another thread, and now having spent a few hours researching without luck on another matter, I guess I'll try my luck again. The problem: I have 30 points, each with a X and Y value (DIV's with a Top and Left setting), placed around a map of 1536x1080px. A user can select any of these points, and when that happens, a line should be drawn (animated in) from one point, to the selected one. This seems really straight forward, and to some extend I have managed to do that, with canvas drawing (p5.js), but it turns out extremely unsharp, and seems to be way to complicated, for what it should do, I've even tried just creating a DIV, and animating on it's width, thereby faking a line. I'm assuming maybe the GSAP SVG animation tools can solve this, but had no luck finding it, it's all about pre made SVG files from illustrator, which then are masked in animations, I can't do that, seeing as I have too many points, and never know how many new ones will be created. Any good solutions to this? It seems to simple, to be this complicated :S / Chris
  3. Hi I'm trying to replicated the transitions on this pages sections using TweenMax. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot';'Dot'+i; D.addEventListener('click',function(){ }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(slides[i],{ background: "none"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(slides[i],{zIndex:1-i}) .set(slides[i-1],{zIndex:slides.length}) .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; full code at codepen can be found here I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation. I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing. However I am getting in an awful mess with the scroll event firing an animation on all the slides. I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery. I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for. I could really do with a a resolution I can go to my client with, or at least a direction I could go in. Thanks javascript jquery horizontal-scrolling gsap pagepiling.js shareeditdeleteflag asked 4 mins ago DansBananaLoafcake 62 add a comment
  4. Ahsan Jamal

    Background parallax effect on mouse move

    I am trying to create a website using the background effect exactly similar as implemented in this website, . On inspect element the div that creating the parallax effect on background from mouse move and scroll as well, we can see that it is changing the translate3D() property of the element on mouse move. Please guide me how can I achieve this same background effect?
  5. Gubbels

    Different text displays on hover

    Hi First what I want to do. I have a slider with 4 pages and depending on the page I'm on, when hovering over a pre-specified element I want some text to display. This text is otherwise (when not hovering over the element) hidden. I've been thinking about ideas how to do it and thought about something and I'm wondernig whether it's possible. I give my "dots" (as seen below) <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> a css active state and then display the appropriate text depending on which "dot" is active? If that wouldn't be possible, how else could I achieve this? So far I only was able to display the text, which is otherwise hidden, when hovering over the pre-specified element. All help is appreciated! Thanks in advance!
  6. Gubbels

    mouseover event

    Hey, I'm kind of struggling right now and I'm not quite sure what to do. I'm using simple divs as an example but I'm actually using an svg looking like this --> <svg version="1.1" id="martini" xmlns="" xmlns:xlink="" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve"> <g id="olive" class="oliveScale"> <line class="st0" x1="441.7" y1="187.6" x2="355.5" y2="322.2" /> <ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 15.3108 456.2295)" class="st1" cx="424.7" cy="214.1" rx="14.2" ry="20.8" /> <path class="st2" d="M432.3,230.5c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L432.3,230.5z" /> <ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 -13.7086 454.2149)" class="st1" cx="408.4" cy="239.6" rx="14.2" ry="20.8" /> <path class="st2" d="M416,256c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L416,256z" /> </g> <path id="stem" class="st3" d="M287.1,413.8c0,0,3.6-2.4,2.9,3.9c-0.7,6.3,3.6,188.5,3.6,188.5l-60.5,15.3c3.6,3.6,64.5,0,64.5,0 s53.9,3.2,63.3,0.6c0.5-0.1,0.4-0.8,0-0.9L302,606.2c-0.2-0.1-0.4-0.2-0.3-0.4c0.2-8.9,4.3-182,3.6-188.1c-0.6-5.2,1.8-4.5,2.6-4.1 L287.1,413.8z" /> <path id="gin" class="st4" d="M174.7,286.4c39.8,46.3,112.4,127.4,112.4,127.4l20.9-0.2c0.2,0.1,0.4,0,0.5-0.1 c4.6-5.1,73.7-82.4,112.1-127.2H174.7z" /> <path id="vermouth" class="st5" d="M420.6,286.4c15-17.5,25.3-30,25.3-31.4c0-4.8-4.4-6.3-5-6.5c0,0-0.1,0-0.1,0H154.4 c0,0-5.1,1.5-5.1,6.6c0,1.4,10.3,13.9,25.3,31.4H420.6z" /> </svg> As shown in the Codepen, I have a slider with two different divs in them, here's what I want to do. Once I hover over the div box that's NOT colored black, I want the black div box to move to the left and the other div to scale to ~1.3 and move to the right. I'd know how to target more than one element using querySelectorAll but how do I give different animations to the elements I'm targeting at once? Thanks in advance for the help and advice.
  7. Hello everybody, I am totally new to GreenSock banners, but I have a task, which is suppossed to be not so hard, but seems to be very hard for me and I would be glad for some help. I have to make 728x90 test size by modifying the necessary javascript modules and css using GSAP. Everything I have is in file.
  8. hadijedank

    Issue on javascript selector to GSAP

    Hi... new guy come to the pool. I'm Hadi. Followed tutorial from Petr/ihatetomatoes, and then the issues is come up. First, all the header and navbar is working with tweenlite, but after I put the container which are the main-page and footer. It's not working anymore. What's wrong here? And about the code pen, I don't know why the animation won't moving there. But still the code is working fine on my file that I mentioned previously. I'm sorry, lil shy to come with noob question. But I don't have mentor to ask directly. Thanks for the help. Regards, Hadi EDIT: omg, now in codepen all the animation is working well, but still in my file just header and its nav which working. But for footer and main-page still not. So, what is the problem actually?
  9. dorijacobson

    disappearing and reappearing animation

    Hi everyone, I'm having some issues with my project for school and I'm hoping someone can animation essentially has four elements: a globe, a dashed line surrounding the globe, a plane that is placed on the dashed line and three clouds. I placed the three clouds in a TweenMax that is separate from the master timeline and they are doing what they need to be doing. The plane is supposed to rotate on the dashed line counter clockwise and that's working fine as well. The globe is supposed to be still and the dashed line is supposed to be rotating clockwise while the plane rotates counter clockwise...this is the part that doesn't seem to be working correctly. Every so often, the animation will completely change in front of me without me even refreshing it– it will either just have the plane, the dashed line and the globe visible (not the clouds) and they'll all be doing what they need to be doing OR it will have everything visible but the dashed line won't rotate. Does anyone know what could be the issue? I appreciate your help!
  10. Hello! I'm trying to apply an animation to the same element in different time lines. But it works in jumps - without a smooth transition between the states of the element. I have a task to do animation with many elements inside one screen. I have several scenes that need to be run by scrolling or clicking on the menu. Under the link all works approximately, as it is necessary to me. One problem is that the animation does not go smoothly from the first state to the second state and then to the third. Thanks!
  11. Hi there, i would like to use this wonderful plugin : I have added everything to my site, according to guide, but interactions do not work, so javascript somehow isn't included. I believe i added scripts & links right. I m sending some screeshots.. and codepen so that u see. (Javascript works in Codepen so i m confused what is wrong) Scripts at lines: 31 , 37, 38 , 39, 40 Also, if i want to style for example colors / backgrounds of buttons, where can i change it, i can't see that in CSS. Could some1 help me please why wouldn't it work for me ?
  12. Hello everyone! I'm trying to make a responsive website utilising svg animations, however I noticed, that when using drawSVG tweens, the length of a path gets only calculated once, during the initialization of a tween. My question: Is there a way to trigger path length recalculations during the drawSVG tween without stoping/restarting it. Attached to this thread is a codepen illustrating the problem. Top path is what it's supposed to look like (yellow path hitting the red dot on extremes), and lower path shows what I'm getting. Thank you in advance
  13. I'm trying to test out a scroll hijacking method I saw on On that page, they have a fixed position container with everything in it absolutely positioned and on page scroll they translate3d the elements up -Y scroll position which I can do but they key ingredient they add is easing to that scroll tracking. So as you scroll the elements follow "recreating the scroll effect" but upon release slowly ease into their final place which is the end Y scroll position. I've found this StackOverflow question,, where it talks about javascript easing mixed with parallax, however, I can't seem to figure out how to apply it to what I'm doing or what I want my end result to be. I also found this JSFiddle where it adds easing based on mouse movement that I thought might be helpful to use pieces from for easing, I've added a link to my current CodePen example with my starting point, any help achieving/deconstructing what Adidas Climazone is doing to add easing to their scrollY transforms would be eternally grateful! Another demo I did on JSFiddle is here: Bonus if I can use GSAP for this!
  14. Chelle Service Capital Inc

    Image Distortion (Glitch) effect On Hover

    Hey guys! I'm relatively new to GSAP, and I've search the forums for image glitch effects on hover to no avail. I'm looking to make an images on the page glitch on mouse hover similar to the effect on the text in the codepen. Is this possible with GSAP? Thanks in advance!
  15. kbeats

    Use MorphSVG in Adobe Captivate?

    Hello, I'm very new to GSAP and also very new to coding. I recently became a Club Greensock member, because I wanted to use the MorphSVGPlugin in Adobe Animate. However, after reading through the forums a bit I learned that MorphSVG doesn't work with Canvas (or something like that)? So now I'm trying to see if it's possible to use MorphSVG directly with Adobe Captivate (I usually build things in Animate then add them into Captivate as a web object). I can't, however, seem to get MorphSVG to work this way either. I've created an external javascript file called 'My.js' and I've loaded that, along with TweenMax, MorphSVGPlugin, and findShapeIndex.js, into my Captivate project on the first few slides. This is the code I use to load the files - function addScript(src){ var s = document.createElement ('script'); s.setAttribute('src', src); document.body.appendChild(s); } addScript(''); (I did this on a separate slide for each file to load, loading MorphSVGPlugin.min.js first, then TweenMax.min.js, then My.js, then findShapeIndex.js). Then, on the 5th slide of my Captivate project I added two SVG icons that I made in Adobe Illustrator. In Captivate I named them 'back' and 'next'. In my external 'My.js' file I gave them variables and created a function to tween them. I call the function on the 'on enter' action of the 5th slide of my Captivate project where the SVG icons are - var next = window.cpAPIInterface.getVariableValue("next"); var back = window.cpAPIInterface.getVariableValue("back"); MorphSVGPlugin.convertToPath("#nextc"); MorphSVGPlugin.convertToPath("#backc"); function myMorph(){"#nextc", 1, {morphSVG:"#backc"}); } I used the identifier "#nextc" and "#backc" because when I inspect the published html file, their div id's are nextc and backc. When I try it this way, I get this error: WARNING: cannot morph a <DIV> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing. So then I have also tried to just use their variable names I gave them - MorphSVGPlugin.convertToPath(next); MorphSVGPlugin.convertToPath(back); function myMorph(){, 1, {morphSVG:back}); } but with this method I get an error that it 'Cannot tween a null target' I've added alerts to the beginning of each of the js files (besides from findShapeIndex) so I know they are all loading. Needless to say, I'm pretty confused and not sure what to try at this point. I wasn't sure if this post was better suited for the GSAP forums or the Captivate forums. Any help or advice would be very much appreciated! Thanks.
  16. Hi, I'm using TweenMax inside a Vue.js SFC - It's a Spinner component I re-use throughout our app. As soon as I visit a page using vuejs router - that has a spinner component in it and then go to another page, on return to the previous page, the animation no longer works and I get tons of errors that increment really fast in the console. It may be related to this if vue.js is hiding it for reuse - I'm not sure if I should be troubleshooting in this forum or vue.js Thanks, Gavin.
  17. html <button class="btn">Show / Hide</button> <br><br> <div class="box"></div> css .box { width: 100px; height: 100px; background-color: blue; opacity: 0; } javascript const btn = document.querySelector('.btn'); const box = document.querySelector('.box'); const showBox = new TimelineMax({paused: true}); //alias for brevity const sb = showBox; const hb = new TimelineMax({paused: true}); //hidebox btn.addEventListener('click', function(){ if(box.classList.contains('active') !== true) {; sb.set(box, {opacity: 0, y: 0}); sb.fromTo(box, 0.5, {opacity: 0, y: 0}, {opacity: 1, y: 0}); box.classList.add('active'); } else if(box.classList.contains('active')) {; hb.fromTo(box, 0.5, {opacity: 1, y: 0}, {opacity: 0, y: -100}); box.classList.remove('active'); } }); New to the forum. I am looking to be able to show an element with one tweened animation and hide with a different animation by clicking the same button. In this case the show is a fade in and the hide is a fade out with a vertical translate. I tried by toggling the .active class and conditionally show or hide based on whether box has the class or not. I have only got it to work once (toggle on off for two clicks) and then it stops. Can someone tell me where i'm going wrong. I want to be able to keep this vanilla js, thanks. demo
  18. izorgor

    IOS Audio issue

    Hey guys, This is not strictly related to the greensock, but also could be I created a banner which has video inside and the video is muted. Whenever my banner is showed, no matter if inside app or inside browser, on IOS, any other sound in background (such as music player) will stop. I know this is default behavior of the IOS (and android as well), but I also saw that some company managed to build banner with video which doesn`t stop background music, but I`m still not sure how. So my questions is - is it possible to workaround somehow this issue inside banner itself via javascript or something ? Maybe something like playing video through the canvas (already tried that didn`t worked), or separating video and audio, dunno. Is there hack or a way to play video that will not affect background music on IOS ? ! Thanks
  19. I'd like to see if there's a way to load GSAP through JavaScript and then create a timeline after it's loaded and ready. I tried to use fetch + then to achieve this, but I think there's something I'm doing wrong here. fetch('') .then(function() { var tl = new TimelineMax({repeat: -1});"#square", 1, {x: 300}) .to("#square", 1, {x: 0}) ; }); Th error I'm receiving: Uncaught (in promise) ReferenceError: TimelineMax is not defined I'm not sure if this is just a JavaScript error or an error with how GSAP needs to be loaded.
  20. GreenHorny

    How Can I Achieve This Slide Effect?

    Hi, Anybody can help me achieve the slider effect this firm is using? I am new to using greensock. Thank you in advance! GH
  21. Kingsley88

    ScrollTo Plugin and ScrollMagic

    Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - and Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?
  22. I've created an animated landing page for my portfolio using GSAP and ScrollMagic.js, but it's pretty resource intensive and I know my code isn't the most efficient. How can I modify the code to create a smoother and more robust animation? And how can my JavaScript be condensed and more efficiently written to avoid repetition? function pageScroll(e) { var clicked =; if (clicked == "navWelcome") {$('#mainNav'), 0.4, {x:windowWidth});, 0.8, {scrollTo:{y:"header"}, delay:0.3}); }else if (clicked == "arrow") {, 3.5, {scrollTo:{y:"#aboutMeFull"}}); }else if (clicked == "navAbout") {$('#mainNav'), 0.4, {x:windowWidth});, 0.8, {scrollTo:{y:"#aboutMeFull"}, delay:0.3}); }else if (clicked == "navServices") {$('#mainNav'), 0.4, {x:windowWidth});, 0.8, {scrollTo:{y:"#servicesConBg"}, delay:0.4}); }else if (clicked == "navPortfolio") {$('#mainNav'), 0.4, {x:windowWidth});, 0.8, {scrollTo:{y:"#portfolio"}, delay:0.3}); }else if (clicked == "portfolioBut") {, 0.8, {scrollTo:{y:"#portfolio"}}); }else if (clicked == "navContact") {$('#mainNav'), 0.4, {x:windowWidth});, 0.8, {scrollTo:{y:"#contact"}, delay:0.3}); } } for (var i=0; i<navBut.length; i++) { navBut[i].addEventListener('click', pageScroll, false); } for (var i=0; i<navItem.length; i++) { navItem[i].addEventListener('click', pageScroll, false); } document.querySelector('#arrow').addEventListener('click', pageScroll, false); //Landing Page $(function() { var xTo = 1.15*window.innerWidth; var yTo = 0.5*window.innerHeight; var rocketTween = new TimelineMax().add([ TweenMax.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsSmall", 1, {backgroundPosition:"0 12%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsLarge", 1, {backgroundPosition:"0 6%", ease: Linear.easeNone}),"#parallaxContainer #rocket", 1, {y:0, ease: Linear.easeNone}),"#parallaxContainer #cloudsFront", 1, {y:0, ease: Linear.easeNone}),"#parallaxContainer #cloudsBack", 1, {y:0, ease: Linear.easeNone}),"#parallaxContainer #comet", 0.5, {x:-xTo, y:yTo, delay:0.5, ease: Linear.easeNone}),"#parallaxContainer #logo", 0.8, {opacity:0, ease: Linear.easeNone}),"#parallaxContainer #arrow", 0.07, {opacity:0}) ]);
  23. Stagnax

    Revealing a background

    I am trying to reveal the black background only after the two red and blue canvases have completed the animation. But as you can see there is "leak" and the black ground is visible during the rotation. Also I'm learning to control overflow and have found this link , but theres something I'm doing wrong . Please Help.
  24. Stagnax

    Cursor follows the eyes

    Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor
  25. Stagnax


    Hi, This is broad question. How can I create something like the pen i mentioned through GSAP. (A detailed explanation would be really helpful as I'm a noob) Thank you in advance.