Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap'.

  • 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. Hello I am new to both adobe animate cc (2017) and GSAP and would appreciate a dumb down answer to this question. So I've followed the tutorial of opening an action, opening a url of the zip file that you download from Greensock. It works when working in html5 canvas for adobe animate cc. However when working in IOS air canvas, I can't find how to upload the zip file. Does anyone know if GSAP works with IOS air and how?
  2. Hello there, I've recently been exploring ways to create awesome animations and i've come across the 'canvas' element. Now i've been looking at some articles which explain which frameworks or libraries exist out there to assist in creating animations on canvas. But it's 2017 now - Almost 2018, what is the best framework I can use for the broader use of Canvas? I'd like to create some cool parallax backgrounds, or multilayer which move on scroll, for now anyway. As always, any help greatly appreciated
  3. Hello there, Im trying to make some cool animations but I don't understand why 'onComplete' isn't working. If you click on the header text, it should first fade out the header, and then scroll, and then continue with the animation.. but it doesn't do that. I have it at the end of my Timeline so it should be firing at the end.. or is that not how it works? Thanks
  4. Hi, I am building a new site and plan to use GSAP to animate some svg in the future. My question is: if I am importing such a large and extensive library should I then use it for every animation on the site? Should I use GSAP over css for simple effects of the DOM.. like opacity on hover? I am more comfortable with the css, but I know I need to learn the GSAP anyway for my other ideas. SO the question is should I use GSAP for everything, or use a combination with css?
  5. I'm currently using GSAP TimelineMax, TweenMax etc.. in Adobe Animate cc 2017.5 (canvas) and its work well but, I need to apply GSAP TextPlugin to my Animate cc (canvas) project. I'm try to do this adding dynamic text field but its not working and following error appear in console " TypeError: b.nodeName is undefined ". Thanks.
  6. Hey guys! Need a little assistance. I'm having trouble with using nested timelines in Adobe Animate. I'm unsure what the best approach is to execute a separate timeline within the main timeline. I've attempted to use both a callback from a function, and just using .add() to put it within the timeline. Can this be done? I'm sure it can, just need someone more experienced to point out where I'm going wrong. Thanks in advance! Here's the code: var pw = new TimelineMax({repeat:-1}) pw.add("begin") .to(this.pc_tools_mc, .5, {x:-164, ease:Elastic.easeOut.config(1, 0.3)}, "+=1") .to(this.pc_logo_mc, .5, { alpha:0 }) .from(this.dw_tools_mc, .5, {x:164, ease:Elastic.easeOut.config(1, 0.3)}) .from(this.dw_logo_mc, .5, { alpha:0 }) .set(this.pc_tools_mc,{x:164}) .to(this.dw_tools_mc, .5, {x:-164, ease:Elastic.easeOut.config(1, 0.3)}) .from(this.pc_tools_mc, .5, {x:164, ease:Elastic.easeOut.config(1, 0.3)}) .from(this.pc_logo_mc, .5, { alpha:0 }) .set(this.dw_tools_mc,{x:164}); .add("end") var tl = new TimelineMax() tl.from(this.text1_mc, 1.5, { scaleX:0, scaleY:0, alpha:0, ease: Power1.easeIn },) .to([this.tree_mc2, this.tree_mc3, this.tree_mc4, this.tree_mc5, this.tree_mc6, this.text1_mc], 0.5, { alpha:0 }, "+=2") .to([this.text2_mc, this.lockup_mc], .5, { alpha:1 }, ) .to([this.text2_mc, this.tree_mc], 0.5, {alpha:0 }, "+=2") .from(this.text3_mc, 0.5, { alpha: 0 },"+=0.5") .add(pw.tweenTo("end")) .to(this.lowes_mc, 0.5, { alpha:1 },) this.stop();
  7. I didn't know if there was a showcase thread but I wanted to share my latest website with you all. https://zadesigns.com make sure to check it out on both the Phone and Browser because it's been designed to be friendly to phones. The site was created with Angular 4.4.6 / UI-Router / Material Design / GSAP 15 / ScrollMagic / SplitText Thanks to Jack and everyone at GSAP for making really great products! Been using GSAP since the good old days of Flash. Also congrats on the new Animation UI dev tool! I haven't had a chance to use it yet but I wish I saw it before I made my site! Thanks! Zuriel
  8. JohnH

    Animate before Drag

    Hi there, new to the forum, so first of all thanks for having me! I'm also new to gsap as well. The question I have is; Whenever I use 'Draggable' and I want to animate the object or element that is being dragged, I want to have it animate onmousedown so that as soon as the object is touched it expands. How can I do this as I've always had my animations run when the object is moved instead of animating before being moved. Is there a clever way gsap can do this or do I need to add a mousedown function? Thanks in advance, John
  9. Is working quite ok, the only requirement is making the buttons to animate with GSAP instead than css. On click I should make the button active with width and height 96px. By default the first element should be always active. I put together this code (is not on the demo ) which is not working fine. $(".app-promo-img-align:first").addClass("active"); TweenLite.to('.app-promo-img-align.active a', 0.4, {width:'96px', height:'96px'}) var button = $('.app-promo-images').find('.app-promo-img-align') button.onclick = function(e) { e.preventDefault; $(this).addClass("active"); $('.app-promo-img-align.active').removeClass("active"); if ($(button).hasClass('active')) { TweenLite.to('.app-promo-img-align.active a', .5, {width:'96px', height:'96px', ease: Power3.easeOut }) } else{ TweenLite.to('.app-promo-img-align a', .5, {width:'80px', height:'80px', ease: Power3.easeOut }) } }
  10. I have an error on this code that I can't understand why keeps showing. //Inline Promotion GSAP animation console.clear(); const threshold = 0.7; // trigger const options = { root: null, rootMargin: '0px', threshold: threshold }; const observer = new IntersectionObserver(animHandler, options); const ar = Array.from(document.querySelectorAll(".two-column-promo-container")); const animations = ar.map(el => (observer.observe(el), new TimelineMax({paused:true}))); var promoLeft = $(".two-column-promo-float-left .two-column-promotion"), promoRight = $(".two-column-promo-float-right .two-column-promotion"), featureLeft = $(".two-column-promo-float-left .two-column-feature"), featureRight = $(".two-column-promo-float-right .two-column-feature"); TweenMax.set("promoLeft, promoRight, featureLeft, featureRight"); // timeline for each section animations[0].from(promoLeft, 1.8, {y:-400, opacity: 0.0, delay:0.0, }); animations[1].from(promoRight, 1.8, {y:-400, opacity: 0.0, delay:1.0, }); animations[2].from(featureLeft, 1.8, {y:-400, opacity: 0.0, delay:0.0, }); animations[3].from(featureRight, 1.8, {y:-400, opacity: 0.0, delay:1.0, }); // observer handler function animHandler(targets, observer) { for (var entry of targets) { if (entry.isIntersecting) { let i = ar.indexOf(entry.target); animations[i].play(); } else { return; } } }
  11. HI everyone, really happy to get a job animating HTML5 banners using GSAP. Making and animating the banners are not the problem, i am having a problem getting them loaded into sizmek. I followed some documentation and registered click events but the agency i have to send them to says they won't work. Does any one have a blank biolerplate i can load my project into with sizmek built into it. The static banner template from sizmek set they gave me keeps throwing errors it's just a simple one size banner that needs a to be fully clickable. Any help would be appreciated.
  12. I want to animate the home page of my website like this one : http://discoveroutpost.com/ I am using GSAP TweenMax function but unable to get the smooth animation like this. I am also trying the ScrollMagic Library for it but still no luck. Please guide how can I achieve this. Thanks in advance.
  13. Admin2015

    scramble text

    who can provide mee scramble text, splittext,draw svg and morphsvg plugin cdn
  14. Hi. I've been stuck for a while on this. The goal is to tween a bubble coming from one circle to another circle while having a 'goo' effect at the exit and entry points. For the filter to have effect, I must place the bubble circle within the starting circle's group, then at some point before the bubble finished following it's designated path, remove it from that starting circle's group, apply the filter to the end circle, and append the bubble to the end circle's group. Does anyone have any thoughts on how to do this while maintaining a smooth animation?
  15. Hi everyone! I would like to create a quotes rotator with SplitText and Timeline Stagger which can be animated in lines or words or chars! I have already tried to create one and there is the Pen that I made below here but it is not really what I wanted to achieve!! I would very appreciate any kind of help. Thank you!
  16. Hey guys, I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out. Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. Question: How can i fade out from where the animation last ended? Thank you guys in advance and Gsap is Awesome!
  17. Hi, I´m building a lib for react that animates components during mount / unmount. This lib uses gsap for animations. Would it be ok for me to release it on npm?
  18. Guest

    GSAP Docset for Dash?

    Does anyone have a current docset for GSAP that can be loaded into Dash for Mac?
  19. Okay I'm fairly new to GSAP but I think I've found a bug. Maybe I'm using something wrong or maybe it's a bug. Whatever it is I wanted to just highlight it to the GSAP experts incase it really is a bug and not me using the animation library incorrectly. First and foremost I should Tell you that I've tested the codepen animation on ALL major browsers. The animation works correctly on IE, Edge, Chrome, Various Mobile Browsers. The only browser that doesn't render the animation correctly is Firefox. I'm using the latest version of Firefox by the way. Okay so the bug I'm referring to is the various "Eyes" that are following a path (I've highlighted the path for your convenience). The eyes are not following the path correctly on Firefox. What I wanted was to make the eyes appear from one mobile and go into the other mobile. This is happening on all browsers except firefox. I apologize for the long SVG code. The two paths I'm using for this are found at the very bottom of the svg code. One path for the "dollars" and the other for the "eyes". The relevant javascript code for this is from line 1 to line 16. Thanks!
  20. Hi all, I'm having some issues when I animate text using gsap and scrollmagic. The screenshot shows where I'm in the middle of a tween that has a duration. Any thoughts? Thanks;
  21. Hello everyone, need help here, 1. I don't know why but my codepen works but when I implemented on the website does not work. Any reasons why? 2. On the other hand, how I make these transitions more secure? Because when you scroll fast the animations has his glitches some times. codepen: I don't know why it's doesn't work on the website. these is the website code. The same!!! Just change the scroll triggers // Scroll Interactions //Init Controller let controller = new ScrollMagic.Controller(); // Ball Scene let ball = $('.ball'); let xCenter = window.innerWidth/2; let yCenter = window.innerHeight/2; let ballTl0 = new TimelineLite(); let ballTl = new TimelineLite(); let ballT2 = new TimelineLite(); let ballT3 = new TimelineLite(); let ballScene0 = new ScrollMagic.Scene({ triggerElement: '.hero-heading', }) .setTween(ballTl0) .addIndicators() .addTo(controller); let ballScene1 = new ScrollMagic.Scene({ triggerElement: '#feature1', }) .setTween(ballTl) .addIndicators() .addTo(controller); let ballScene2 = new ScrollMagic.Scene({ triggerElement: '#feature2', }) .setTween(ballT2) .addIndicators() .addTo(controller); let ballScene3 = new ScrollMagic.Scene({ triggerElement: '#feature3', }) .setTween(ballT3) .addIndicators() .addTo(controller); // Change index function changeIndex() { console.log('change index!!!'); } ballTl0 .to(ball, .8, {css:{ x: '-12%', borderRadius: '50%'}, ease: Elastic.easeOut.config(.5, 0.4)}) ballTl .to(ball, .8, {css:{ x: '10%', borderRadius: 0}, ease: Elastic.easeOut.config(.5, 0.4)}) ; ballT2 .to(ball, .5, {css:{ x: '-50%', borderRadius: '50%', scale: .5}, ease: Elastic.easeOut.config(.5, 0.4)}) ; ballT3 .to(ball, .5, {css:{ x: '-90%', borderRadius: 0, scale: 1}, ease: Elastic.easeOut.config(.5, 0.4)}) ; website: http://muuaaa.webflow.io/home-newer (webflow for fast prototyping and great for design focus. I include de js I want).
  22. Hi, I've encountered a small bug relating to the rotation property. As you can see in my codenpen I'm rotating a single Gear in the SVG. It is being animated to 360 degrees and is repeating indefinitely. The behavior is as expected except the fact that if you observe carefully, there is a slight jerk/glitch/delay whatever you call it, in the animation. It becomes more noticeable as we slow down the animation. I swear I saw a post regarding this bug on this forum some time ago but now I can't find that post that's why I'm asking again. Is there any way this can be fixed? Any help would be really appreciated. Many Thanks! Ali
  23. Hi guys, this is my first attempt with GSAP, i would like to have any opinion for improve performance or the animation.
  24. Hi All, I've been using GSAP for 2 months now and It has saved me a LOT of time and headache. It is an awesome library. Recently I discovered that I can use Scroll Magic library with GSAP and I've been trying to make an animation using both of them. Here's the link to my codepen demo: The idea is that as we scroll down the page, the text "DESIGNWORX" should translate to the left and at the same time opacity should animate from 1 to 0. I've achieved that. The problem I'm facing is that I want to reverse this animation i.e the text "DESIGNWORX" should translate back and opacity animate from 0 to 1 ONLY when I reach the top of my page while scrolling back. I've tried to do that by using "triggerHook" method as you can see in my pen but sadly I've failed. I've also searched all over the internet for answers but all in vain. I was hoping if someone could help me in this regard. I'm not an expert in javascript and would really appreciate any tips or help. Thanks in advance! Ali
  25. I have installed gsap using bower and then used gulp with mainBowerFiles to compile it into my vendors.js minified file. However when I try to write any GSAP code, it simply says that TweenLite (or TweenMax) is not defined. Is there any help to be had in using GSAP in this way?
×