Jump to content

Search the Community

Showing results for tags 'gsap'.

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 454 results

  1. Hello I am trying to animate numbers which I will get from an API while rendering it into viewport. I have tried to do so but in my case all the instance of numbers are getting updated but I want each number should be updated upto the value I have got from API. How can I achieve this? Here is what I have tried. https://codepen.io/patrickjane/pen/agNePM Thank You!
  2. Hi, I'm looking for a GSAP developer who could create a full screen interactive module as illustrated in the attached video clip. The site is already in development but we need help with this more advanced module that will be embedded in the home page hero banner. Experience required: - GSAP - Preloader animation with progress bar - Video controlling (play, pause, etc) - SVG animation It would need to be completed in approximately 3 weeks time. All assets, including images, SVGs and video clips would be supplied. Please watch through the short video example of what we are after and if you feel this is something you could develop for us please contact me as soon as possible to arrange a Skype chat. Note: there are two sides "Precision" and "Unleashed". Clicking on each word expands the relevant side and plays the video. Please also ignore the logo in top right, the button in bottom center, as well as the mail icon in bottom right. If you have any questions please comment below. Looking forward to working with one of you geniuses Thanks, Andy
  3. I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. ! I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. <div id="home-about" class="div-pics div-left"> <h1 class="div-title">About</h1> <div class="div-desc dl"> <div class="div-arrow"> <div class="arrow-part arrow-top"></div> <div class="arrow-part arrow-bottom"></div> </div> <p class="div-text dt-left"> Lorem ipsum ... </p> <li class="div-link"><a href="#">Order parts</a></li> </div> </div> function loopDivs() { divArray.forEach(div => { div.addEventListener("mouseover", showDetails); function showDetails() { tlDetails = new TimelineLite(); tlDetails .to(".div-desc", 0.5, { top: "0%" }); } }); } event.target - instead of ".div-desc" won't work since in my case I can't hover the .div-desc, because it is sent all the way down and it's invisible. My idea is to hover its parent and then it would appear. Thanks in advance!
  4. Good morning, I'm making a project with Angular 5 and I've imported GSAP along with TimelineMax but I can't seem to get CustomEase to work. The terminal doesn't give me errors but when I load the page in the browser I get the "Error: CustomEase is not defined" Can someone explain me the exact procedure to import and use CustomEase? Maybe I'm missing something.
  5. Hey everyone, I have been reading this forum for a long time but this is my first post/question as i have come across a dilemma. Hope you're all doing well. I wanted to include my JS code in the codepen but it's a big crazy mess. As you guys can see in my codepen i have a section in the project I'm building which on large screens has 2 rows with 3 boxes in each row and on small screens 1 column with all boxes stacked on top of each other. What i want to accomplish is really simple, i just want each box to fade in from the bottom-up as it comes in view. The reason I say each box is because my priority is more on the small screens with 1 column, I'm willing to compromise for large screens and what i mean by compromise is that i don't mind if the whole row animates together as it comes in view and then followed by the next row. I kind of achieved this in a very unusual way with code that is terribly wrong, and i looked at plenty of scrollmagic and GSAP examples including in this forum but i didn't come across any solutions. I would really appreciate any help in how i can achieve this. Thank you.
  6. Hi there, I'm having an issue with GSAP creating lots of detached DOM items in chrome when a parent div is deleted during a tween, despite attempting to stop the tweens. When I do this using just JQuery and not include the GSAP plugin, no detached items remain. To view detached items in chrome I use the following under "Discover detached DOM tree memory leaks with Heap Snapshots": https://developers.google.com/web/tools/chrome-devtools/memory-problems/ Code is below, you'll need jQuery, GSAP, Tween Max and one image. 1) Check for detached items in chrome (you'll see a few that GSAP etc. has by default) 2) Click "Start Tween", the during the 10 second tween click "Stop Tween and Remove Div" 3) Re-check for detached items in chrome. You'll see more have been created. (i.e. not removed by the tween stop). Any help would be greatly appreciated, have switched GSAP for jQuery off in my code for the time being. <!DOCTYPE html> <html> <head> <title>Tween Test</title> <script src="../jquery-3.0.0.min.js"></script> <script src="../greensock-js/src/minified/jquery.gsap.min.js"></script> <script src="../greensock-js/src/minified/TweenMax.min.js"></script> <script> function TweenMe() { jQuery("#innerDiv").animate({ opacity: '0' }, 10000); } function StopTween() { jQuery("#innerDiv").stop(true, false); jQuery("#outerDiv").remove(); } </script> </head> <body> <button onclick="TweenMe();">Start Tween</button> <br /> <br /> <button onclick="StopTween();">Stop Tween and Remove Div</button> <br /> <br /> <div id="outerDiv"> <div id="innerDiv"> <img src="../media/img/red_square.jpg" id="imgMain" style="position:absolute;" /> </div> </div> </body> jquery.gsap.min.js jquery-3.0.0.min.js TweenMax.min.js
  7. I was making an animation using GSAP and SVG. I am new to GSAP so i don't know that if there is another way to do this animation with GSAP. If there is any better way to do this please suggest me. I would be thankful for good suggestions. Edited : it has issue when user scroll very quickly many parts of bulb doesn't appear properly and also some issues when user scroll upside. (Give suggestion to fix it)
  8. I put the following CDN code in my HTML file and then executed TimelineLite function in javascript. <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script> <My javascript code> start = ()=> { let loader = document.getElementById('loading'), loadContents = document.getElementsByClassName('loading_content'), tlLoader = new TimelineMax(); // Loader Timeline tlLoader .staggerFromTo(loadContents, 0.3, {y:0, autoAlpha: 0}, {y:20, autoAlpha: 1, ease:Back.easeInOut}, 0.05 ) .fromTo(loader,0.3, {autoAlpha: 1, scale: 1.3}, {autoAlpha: 0, scale: 1, ease:Power0.easeNone}, 0.9 ); } start(); Then... the following error appeared in Console. Why is this happening? I guess I add the CDN code incorrectly, so I change to another CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> and tried to use changed TimelineMax to TimelineLite in my javascript code. but this problem is still happening now. plz.. help me
  9. Hi all. Please, help me. Why does circle clip path on image working wrong in my pen in firefox browser? My animation begin from circle(0% at 0% 50%) to circle(150% at 0% 50%), but in firefox it has value clip-path: inset(150px at 0% 50%). Why it happened? Thank you for answers
  10. I was looking to see if there's a way to support a multi-finger drag when I came across a year old forum post (http://greensock.com/forums/topic/11897-multi-finger-swipe-on-draggable/). Instead of bringing it back I thought it better to post a new one. Essentially, I need the ability for any number of fingers to be detected the same by draggable. I am using draggable in a touchscreen kiosk to scroll a div within a bounding container. There isn't any pinch zoom or other multi touch gestures that it would interfere with. Users don't understand that the kiosks only work with a one finger drag at the moment, so the client wants to add multi-touch compatibility to dragging. I know of hammer however everything is already written using draggable (I'm already using Hammer for swiping on different elements in a different manner), and I really like the smoothness of draggable. In order to use hammer I'd have to rewrite draggable's throwprops which I'd rather not have to do. Is there a way to allow multi finger touch or has that not been added? Thanks!
  11. Hi GSAPpers! First post in the forum... I code mainly html and css (and some -little- jQuery) and now I'm learning GSAP and "modern" vanilla JS since two week ago. Today I'm testing GSAP combined with Scrollmagic. I'm trying to apply the same scene (a simple TweenMax with a fade in from the bottom) to all the elements of the page with the class "fadeInBottom". I can do it with this jQuery: let controller = new ScrollMagic.Controller(); $('.fadeInBottom').each(function () { // build a tween let fadeInBottom = TweenMax.from($(this), 1, { y: 100, opacity: 0 }); // build a scene let scene = new ScrollMagic.Scene({ triggerElement: this, offset: -200, reverse: false }) .setTween(fadeInBottom) .addTo(controller) }); Now i'm trying to do the same in plain vanilla JS: let controller = new ScrollMagic.Controller(); // FadeInBottom let fadeElem = Array.prototype.slice.call(document.querySelectorAll(".fadeInBottom")); let self = this; fadeElem.forEach(function(self) { // build a tween let fadeInBottom = TweenMax.from(self, 1.5, { y: 100, opacity: 0 }); // build a scene let scene = new ScrollMagic.Scene({ triggerElement: self, offset: -200, reverse: false }) .setTween(fadeInBottom) .addTo(controller) }) But it just doesn't work. And the console says Uncaught ReferenceError: controller is not defined at index.html: ".addTo(controller)" at Array.forEach (<anonymous>) at index.html:861 "fadeElem.forEach(function(self) {" Any help would be appreciated. Thank you!
  12. Hi there, First post here! I'm working on a React/Gatsby app which references this tutorial. I've solved most of the issues except for the following error: TypeError: Cannot read property 'easeOut' of undefined I've tried a bunch of variations of imports destructuring etc but Quad is never defined. My code is as follows: import React, { Component } from "react" import Layout from "../components/layout" import SEO from "../components/seo" import { TweenMax, Quad, Sine, Back } from "gsap/TweenMax" const prettyLetter = require( 'pretty-letters' ) export default class IndexPage extends Component { componentDidMount() { var options = { groupClass: 'char-group-', groupTag: 'span' } prettyLetter('a', options) const lineEq = (y2, y1, x2, x1, currentVal) => { // y = mx + b var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1 return m * currentVal + b } const lerp = (a,b,n) => (1 - n) * a + n * b const distance = (x1,x2,y1,y2) => { var a = x1 - x2 var b = y1 - y2 return Math.hypot(a,b) } const getMousePos = (e) => { let posx = 0 let posy = 0 if (!e) e = window.event if (e.pageX || e.pageY) { posx = e.pageX posy = e.pageY } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop } return { x : posx, y : posy } } let winsize; const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight} calcWinsize() window.addEventListener('resize', calcWinsize) // The feDisplacementMap element const feDisplacementMapEl = document.querySelector('feDisplacementMap') class Menu { constructor() { this.DOM = { svg: document.querySelector('svg.distort'), menu: document.querySelector('nav.menu') } // The images (one per menu link) this.DOM.imgs = Array.from(Object.assign.apply(Object, [this.DOM.svg.querySelectorAll('g > image')])) // The menu links this.DOM.menuLinks = Array.from(Object.assign.apply(Object, [this.DOM.menu.querySelectorAll('.menu__link')])) // Mouse position this.mousePos = {x: winsize.width/2, y: winsize.height/2} // Last mouse positions (one to consider for the image translation movement, another for the scale value of the feDisplacementMap element) this.lastMousePos = { translation: {x: winsize.width/2, y: winsize.height/2}, displacement: {x: 0, y: 0} } // feDisplacementMap scale value this.dmScale = 0 // Current menu link position this.current = -1 this.initEvents() requestAnimationFrame(() => this.render()) } initEvents() { // Update mouse position window.addEventListener('mousemove', ev => this.mousePos = getMousePos(ev)) this.DOM.menuLinks.forEach((item, pos) => { const letters = Array.from(Object.assign.apply(Object, [item.querySelectorAll('span')])) const mouseenterFn = () => { // Hide the previous menu image if (this.current !== -1) { TweenMax.set(this.DOM.imgs[this.current], { opacity: 0 }); } // Update current this.current = pos // Now fade in the new image if we are entering the menu or just set the new image's opacity to 1 if switching between menu items if (this.fade) { TweenMax.to(this.DOM.imgs[this.current], 0.5, { ease: Quad.easeOut, opacity: 1 }) this.fade = false } else { TweenMax.set(this.DOM.imgs[this.current], { opacity: 1 }) } // Letters effect TweenMax.staggerTo(letters, 0.2, { ease: Sine.easeInOut, y: this.lastMousePos.translation.y < this.mousePos.y ? 30 : -30, startAt: {opacity: 1, y: 0}, opacity: 0, yoyo: true, yoyoEase: Back.easeOut, repeat: 1, stagger: { grid: [1,letters.length-1], from: 'center', amount: 0.12 } }) } item.addEventListener('mouseenter', mouseenterFn) }) const mousemenuenterFn = () => this.fade = true const mousemenuleaveFn = () => TweenMax.to(this.DOM.imgs[this.current], .2, { ease: Quad.easeOut, opacity: 0 }) this.DOM.menu.addEventListener('mouseenter', mousemenuenterFn) this.DOM.menu.addEventListener('mouseleave', mousemenuleaveFn) } render() { // Translate the image on mousemove this.lastMousePos.translation.x = lerp(this.lastMousePos.translation.x, this.mousePos.x, 0.2) this.lastMousePos.translation.y = lerp(this.lastMousePos.translation.y, this.mousePos.y, 0.2) this.DOM.svg.style.transform = `translateX(${(this.lastMousePos.translation.x-winsize.width/2)}px) translateY(${this.lastMousePos.translation.y-winsize.height/2}px)` // Scale goes from 0 to 50 for mouseDistance values between 0 to 140 this.lastMousePos.displacement.x = lerp(this.lastMousePos.displacement.x, this.mousePos.x, 0.1) this.lastMousePos.displacement.y = lerp(this.lastMousePos.displacement.y, this.mousePos.y, 0.1) const mouseDistance = distance(this.lastMousePos.displacement.x, this.mousePos.x, this.lastMousePos.displacement.y, this.mousePos.y) this.dmScale = Math.min(lineEq(50, 0, 140, 0, mouseDistance), 50) feDisplacementMapEl.scale.baseVal = this.dmScale requestAnimationFrame(() => this.render()) } } new Menu() } render() { return ( <Layout> <SEO title="Home" keywords={[`Artist`, `Brisbane-based`, `drawing`, `painting`, `watercolour`, `sculpture`, `installation`, `video`, `embroidery`]} /> <div style={{ paddingBottom: 100 }}> <svg className="distort" width="350" height="450" viewBox="0 0 350 450"> <filter id="distortionFilter"> <feTurbulence type="turbulence" baseFrequency="0.07 0.01" numOctaves="5" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="noise"/> <feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse"/> </filter> <g filter="url(#distortionFilter)"> <image className="distort__img" x="50" y="50" xlinkHref={require('../images/1.jpg')} height="350" width="250"/> <image className="distort__img" x="50" y="50" xlinkHref={require('../images/2.jpg')} height="350" width="250"/> </g> </svg> <nav className="menu"> <a href="#" className="menu__link">Shanghai</a> <a href="#" className="menu__link">Taipei</a> <a href="#" className="menu__link">Bangkok</a> <a href="#" className="menu__link">Kyoto</a> </nav> </div> </Layout> ) } }
  13. Im quite new to GSAP and currently working on a project. I found this slider here online: https://codepen.io/gvrban/pen/qjbpaa and modifyed it to fit my needs. You can find a it on codepen: https://codepen.io/anon/pen/KEYRBY (its ripped out of my project and anonymized so don't wonder for the look) Only problem is, if I resize the page, the slider is of and I have to do a reload of the page to get it fitting again. I understand that it is cause of the calculated variables (which are off after a resize). Is there an easy way to make it responsive or do I have to recalculate it with a window.resize? Thanks in advance.
  14. I've prepared animations for two objects in js, how should i set up the TimeLine so that it executes flipCards() function after let's say 2 seconds from window load? Additionaly it would be nice if I could adjust delays between animations of each object.
  15. Hello folks, For a school project I am creating an analog clock and animating it using GSAP. For now, I've got it moving in the way I want, but part of the functionality of a clock is that it actually shows the current time. So my hence my question, how do I get the arms to show the current hours, minutes and seconds?
  16. Sceik

    JQuery clock to GSAP

    So for a school product I really want to recreate something like this, but the example here is using jQuery. One of the conditions of the challenge was to use the GSAP libraries, so jQuery is not allowed. Is there an easy way to make this kind of clock using GSAP? Is there fast way to replace jQuery with GSAP withing my js files? I'm a beginner so all the tips are welcome!
  17. Hello, I would like to know if it is possible to create my own HTML structure with SplitText. That is to say, instead of having a single div around each line, I would like to create 2 divs around each line. Thanks.
  18. Hello there! I'm a bit newbie in a GSAP animation exactly. And I'll start with a simple example to understand my expectations. For example, if I'll create the element like this const elem = document.createElement("div"); it is not in DOM for now, but I can apply animation on it so far TweenMax.to(elem, 1, { x: 300 }); and it will start immediatly. So, when this element will be appended into DOM (after 1 sec passed), it will have its `transform: translateX(300px);` If this element appends while tweening we'll see it moving from some middle point. The very simple example is in CodePen applied. Is there a way to make some performance on elements, that are not in DOM for right now, i.e. hold the animation until the element appears on the screen? Some kind of holding animation request until appending or smth. similar. Hope, my explanation is well. Best regards, Nick Rimer UPD: I solved this case with a combination of `pause` property and `document.body.contains(elem)`. Saving animation first: const anim = TweenMax.to(elem, 1, { x: 300, paused: !document.body.contains(elem) }); Run animation when element will appear: anim.play(); But I don't know if this solution is awful/great/the best. Maybe you'll find the most efficient and elegant way. CodePen was updated. UPD2: Want to point out that the aim is to understand are there any performances on start of the animation I not needed to start right now? I really don't wanna to start even calculate something, if the animation starts not in time (there may be several animation at one time or smth. else). But to start animate, when the element appears. So I don't really understand will the solution with `paused: true` helps or not.
  19. Hi I coded this animated boombox in notepad++ and when the dragger at the bottom is dragged the width of the slider should increase, like in the image below. It works perfectly in my browser but when I put the same code in codepen the width updates as its supposed to but the slider never animates. Is this a codepen issue? or is there something I've left out that is causing this? Thanks
  20. 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!
  21. I have one query on timelinemax .to(). I have a bunch of images with class name .img-container. But one of the class has a class name active. I want to exclude that active class and animate other classes. Just like jquery .not('.classnAme'); Thanks in advance.
  22. 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
  23. Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon
  24. Hi, I'm running into a situation and I;m not able to solve it by my self. I have section 2 with a scroll to top when entering the section and is breaking the anchor menu, so for example if you are in section 0 and click on the menu to go to section 3 the scroll will stop at section 2. I have been searching and tried some of the solution but none of them worked. How could avoid the section with the autoscroll to hijack the menu? Thanks
  25. Hi guys, I'm trying to do a fadein and fadeout effect on pinned sections using scrollmagic and gsap. However, i seem only to be able to do either a fadein effect or a fadeout effect only, what im trying to achieve is fading in and fading out as im scrolling and having the text still pinned while both effects applied. Here is a fiddle of what im having right now. Any help is very very much appreciated. NOTE: from the fiddle it might look like i can already achieve a fadein / fadeout effect from the 2nd section to 3rd section, where ACTUALLY the 3rd section just has a fadein effect.