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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Guest

    GSAP Docset for Dash?

    Does anyone have a current docset for GSAP that can be loaded into Dash for Mac?
  2. 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!
  3. 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;
  4. 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).
  5. 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
  6. Hi guys, this is my first attempt with GSAP, i would like to have any opinion for improve performance or the animation.
  7. 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
  8. 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?
  9. I'm building an intro animation in Codepen and I wanted to tween the pseudo element `.marquee__tagline--logo::before`. I saw that this can be done using CSSRulePlugin, however it is just keeps throwing out errors. The pseudo element is showing up in dev tools, and it clearly is rendering on the page, so I'm unsure of what I'm doing wrong here. Any help would be greatly appreciated!
  10. I'm using PHPStorm* (http://www.jetbrains.com/phpstorm/) for a project at work and I'm using GSAP in a javascript file that's part of the project. Having difficulties getting it to recognize the GSAP libraries — and others, to be sure, such as enquire.js. Specifically I keep getting getting warnings such as unresolved type TimelineMax unresolved type TweenMax I've gone through PHPStorm's process for adding external libraries to the project (http://www.jetbrains.com/phpstorm/webhelp/configuring-javascript-libraries.html), but no dice. Has anyone used GSAP with JetBrain's products — WebStorm, PHPStorm — and had any success at besting this? *Which is essentially WebStorm+PHP
  11. In the attached codepen I have a timeline in which `blocks` stagger into the display. That all works fine and well, but I'd like to make it so that the `autoAlpha` property runs a bit quicker than the rest -- for instance 300ms rather than 600ms. Is there any way of achieving this type of interaction with certain properties within a stagger going quicker than the rest?
  12. Hello everyone. I know that there is topic about angular but I have checked every topics without having an answer to my problem. My problem is simple. How to implemenent properly ScrollMagic and gsap to an Angular-Cli (2/4) app. I have installed: npm install gsap npm install scrollmagic I have added to my .angular-cli.json: "scripts": [ "../node_modules/gsap/src/uncompressed/TweenMax.js", "../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js", "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js", "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js", ], In my component, I have: import { TweenMax } from 'gsap'; import * as ScrollMagic from 'ScrollMagic'; import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"; import 'ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js'; And I use in my script.: TweenMax.to(calculator, 1.5, { scale: 2 }) ... new ScrollMagic.Scene(...) .setTween(TweenMax.to(calculator, 1, { scale: 2 })) And i get the following error: Cannot read property 'to' of undefined If I remove the path of TweenMax in angular-cli.json, and I remove the import of animation.gsap.min.js, the following action works. TweenMax.to(calculator, 1.5, { scale: 2 }) but the next action: .setTween(TweenMax.to(calculator, 1, { scale: 2 })) doesnt work and I have this error: (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js And if I just remove the import {TweenMax} from 'gsap' in my component, I get the following error: ./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in 'D:\...\...\node_modules\ScrollMagic\scrollmagic\minified\plugins' @ ./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js 3:53-103 @ ./src/app/cv/cv.component.ts @ ./src/app/app.module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts So If someone know how to install it properly, that would be great. Thank you.
  13. Hi If I use tweenmax and a couple of the plugins on a site - is it possible to combine all the 3 source scripts (for instance. tweenmax, cssrule plugin, drawSVG plugin) into one file to save on load times / http requests? If so how would I go about doing this, would I just cut & paste the code from all 3 un-minified files into one file, and then minimise the combined file? At the moment I'm just using tweenmax (which i then link to my main.js file for when I add tweens etc obviously) Or is this just a bad idea all round? Emily
  14. hello guys, i have problems with safari because my animations are very slow and in chrome is very fast, Can someone help me with this ? in this moment I use scrollMagic a example of my code !!! let animationParallax = new TimelineMax() .to(".Somos__Header", 20, {y: "-140%", ease: Linear.easeNone}) this.somosScene = new ScrollMagic.Scene({ triggerElement: ".Somos__Container" , duration: '50%', offset: -300 }) .setTween(animationParallax) .addTo(controller) url: http://2017.monoku.com/
  15. Hey guys, Thanks for your help in advance. I have a problem when repeating the tween, it stops at the end of each iteration, and starts playing again. Since the stop is quite obvious, so I want to remove it, is there any way to do that? Another problem is that, even I am using `Power0.easenone` on it, it seems like there is still an ease-in applying to the tween? Is this the default behaviour of `Power0.easenone` or did I do something wrong so the ease function wasn't applied to the tween? Thanks.
  16. Hi. I can't seem to make GSAP run well on Safari. I made a simple example which runs smooth in IE, Chrome, Firefox except for Safari, where it ends up choppy. I've seen this happen not only with GSAP, but js in general, where it just can't refresh fast enough, though I don't know what's that about. I'm fairly new to coding and I would appreciate any help on how to do SVG animation properly for all the browsers. Thank you, Rojus.
  17. I'm new to banner development and I'm pretty much on my own. Living and learning... I've built quite a lot of DCMs without any issues. My DCM template is pretty solid already but this template I created doesn't work well with other formats and ad platforms. I ran into a lot of issues while doing DCRM and sizmek ads. I've tried BannerTime and I liked it for the most part like being able to choose which platform specific template to use and all but it's using smart objects and stuff which the dumb me doesn't really see the point of using all that while every KB counts. I also noticed that it served the ad right in the middle of the page horizontally and vertically. I also do not see the point of that. Aren't ads supposed to be at the top left corner by default? But I digress. I'm scared if I changed something, it would break something else. I plan to create my own builder in the future once I gain more understanding on the requirements of each ad platform. For now I just want a very minimal builder that can create boilerplates for different ad platforms with gsap so that I don't run into any more issues. That's it. Please help if you know any. Thank you. Oh and does anyone run into issues by using outdated templates? I don't know why ad platforms do not make it easy to get the latest stable templates. So, it would be great if it's a builder that is being updated quite regularly.
  18. Hi I have a tween on a transformed span that i can't get to work properly. I need to change the transformOrigin, but because the parent element is rotated 270deg it's created a bit of an issue (codepen link attached). I've commented out a line on the timeline, which shows how I would like the animation to fade out, but having it so the line scales up from the bottom causes it to jump out of position. Is there a solution under the current HTML layout, or is the fact I'm using spans (with inline-block added) part of the problem? I've tried a number of different things but none of them seem to work. Kind regards, Paul.
  19. Hi guys! I'm having a bit of trouble here with Draggable util. I am trying to make a tabbed interface on mobile, made of a horizontal container which can be scrolled in the X axis with sections, and sections which can have any number of posts, and can scroll in the Y axis. With draggable, this works great in desktop when using a mouse, but when on mobile (Android, iOS, or Chrome Inspector as mobile), the X axis won't budge. You can watch it in action in the codepen. Any insight on it would be greatly appreciated
  20. Hi all, I started working on an idea and want to stop before I go further and ask a few questions and get some criticism on best practices. I'll preface with saying that I'm only concerned with modern browsers. First, GSAP performance. Is there a better approach I could take to accomplish the same thing and would perform better? Second, React with GSAP. This should probably be a separate question... I've been building react apps via `create-react-app` for a while and in the past, I had some issues using GSAP in React. Mostly, with using plugins that `require TweenLite`, requiring me to eject the `create-react-app` and customize the webpack config to resolve the alias. (As an aside, I now get around ejecting for simple things like this by using react-app-rewired). There are some edge case issues in particular I'm trying to solve. When you move the mouse quickly from left to right, sometime the cube will spin too much. I've played around with some boolean checks to see if I'm overlapping tweens or something but nothing seems to help. I suspect it's based on the way I'm "snapping" the cube's most forward face to the center when the mouse moves back to the center. EDIT 1... is it possible that this is related to React state? I wonder if react-gsap-enhancer would help. EDIT 2... looks like the codepen may even have other issues that aren't present in my local setup. If you move the mouse too far past the cube it stops, which should only occur when the mouse is over the cube. And it's more difficult to see the real issue I'm trying to solve in the codepen.
  21. I have created a sliding portfolio gallery type of page and having the hardest time getting safari in particular to render smooth animations and scrollto's. I originally was using scrollmagic and tweenmax which was extremely choppy and could not be used, I re-wrote the page to use only Tweenmax and the ScrollToPlugin, it's much better now, but when I have the images visible, the page is still a bit choppy. I am wondering if there is anything I can do to up the performance. Link: http://melissamorgandesign.com/portfolio Here are the tweens that are going on, the trouble seems to be scaling the div/bgimage while scrolling with scrollto. Going horizontal also adds a wrinkle. TweenMax.to(window, 1.5, {scrollTo:{x:$("#div" + section).offset().left - 30}}); TweenMax.to("#div" + section, 1, {width:"60vw"}); TweenMax.to("#div" + section + " .subsection1", 0.2, {height:" 30vh", delay:0}); TweenMax.to("#div" + section + " .subsection2", 0.2, {height:" calc(70vh - 3.5vw)", delay:0}); TweenMax.to("#div" + section + " .subsection1 h2", 0.5, {fontSize: "48px",autoRound: true, delay:1}); TweenMax.to("#div" + section + " .subsection1 .portfolio-description", 0.5, {autoAlpha: 1, display:'block', delay:1}); TweenMax.to("#div" + section + " .next-jump", 0.5, {autoAlpha: 0, delay:.1}); Any thoughts for smoothing this out?
  22. I successfully implemented a native slider from Framer to control the timeline, instead of using jQuery and the jQuery UI slider library. My main problem emerged when I realized that the timeline events [onComplete, onProgress...] were not trigger at all. Here is the prototype. Sadly, I don't know how to isolate the bug or recreate this outside of Framer, but essentially my code goes as follows. init = new TimelineMax({onComplete:updateSlider}) # hSection is an Framer layer init.from(hSection, .5, {opacity: 0, y:"+=200", ease:Power3.easeInOut}, 0) # footer.children is an Framer layer with elements within init.staggerFrom(footer.children, .5, {opacity: 0, y:"+=25", ease:Power3.easeInOut}, -.15) # Here is the slider component slider = new SliderComponent width: Screen.width / 2 height: 20 # Here is the slider event that I used to drag and affect the timeline progress. This works like a charm. slider.on "change:value", (event, ui)-> init.progress(ui.value ).pause() return # Here is the function that needs to be triggered the moment that timeline is completed. Nothing happens. updateSlider = () -> print init.progress() Can you help me out? CoffeeScript code
  23. We are an emerging company in the healthcare space looking for a developer with experience in landing page development that is expected to last 1-2 weeks. Must be experienced with Javascript/Jquery, Greensock (other animation libraries), responsive design, and css3 transitions. We are open to location, but would prefer someone in the United States. We have specifications available for applicants to review upon request. If you have any questions or are interested in the role please reply below or at jermaine@care-advisors.com. Cheers, J
  24. Hi guys - To create a tween that animates as you scroll what do you need exactly? I am referencing both tweenmax and scrollmagic and I also added the gsap animation plugin. No matter what I do this doesn't seem to want to work. Please help!
  25. Hi, I created a project using GSAP TimelineMax Plugin where the text on the left side slides in the original position from the left (kind of like fade in). var timeline = new TimelineMax(); timeline.from(".main-text-home-cta h2", 1, {x:-100, opacity:0},0) .from(".main-text-home-cta h4", 1, {x:-100, opacity:0},0) .from(".buttons-under-nested-rows", 1, {x:-100, opacity:0},0) .from(".devices-chat-picture", 1, {x:100, opacity:0}); The code above the code i used and added near the </body> tag and the TimelineMax and TweenMax JS files above the code. The problem i am facing is that when the page loads the text appears on the screen in its original position (the position it will after the animation completes) for few seconds (or till the time the page is loading) without animation and as soon as the page load is completed the animation starts. So I want to know whether this a problem with GSAP Plugin or I am doing something wrong. And also I want to know how to fix this so that while the page load nothinng will be shown in the view and after the page loads the animation will start. One more problem that I faced is that when the animation starts after the page load it is very slow and laggy (again I don't kow whose problem is this). Thanks.
×