Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'animate'.

  • 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. After a few days of struggling with this I finally decided to post on here for help... I'm trying to create a fullscreen section on my webpage that has a background image that upon being scrolled into view gets an opacity layer over it and after that opacity layer appears the image should become 50% of width (animate from left to right) and from the left side there should slide in a white "box" with text... the opacity, and the white half with text should happen after the image reaches top of webpage and then these animations should happen one after another... My problem is that I don't know how to make these animations apear one after another and the white half with text jumps in relay fast.. it should move depending on user scroll (I tried using the scrub feature of GSAP but I didn't know how to use it corectly to achieve what I want...) P.S this is my first time using GSAP so feel free to correct and point out all the mistakes I made Here is a link to a video of the animation made in XD how it is suposed to look like... https://imgur.com/a/xJHKCdS
  2. Hello Guys, I am having trouble creating an circular animation with motion path. Basically what I am trying to achieve is that all the 4 images rotate in even manner. for example First image should start from 0%, second from 25%, third from 50% and fourth from 75%. Here is the code sandbox for my code https://codesandbox.io/s/orbit-motion-path-mb6ns?file=/src/App.js:1339-1344 Please see attached screenshot for what I am trying to achieve Please help me. Thanks
  3. Hi All, I need your help to understand how I can build this kind of effect. The idea is quite simple, on scroll the viewport move along a big comp (gallery) but I don't know how to start :-/ Can you help me on this ? Thanks a lot scrollview.mp4
  4. Hello, I am quite new to GSAP and I heard a lot of good words regarding its capabilities. I am working on a website where I want to implement momentum-based scrolling as observed in the following websites: https://abhishekjha.me/ https://rekhchandsahu.com/ I spent a day learning basics of GSAP, read some posts on the forum, and did a few Google searches. I stumbled across a similar post, hinting the use of ScrollTrigger plugin. However, I was not able to exactly figure out how to achieve the same effect. Could someone guide me about creating such a scroll experience? (React-oriented solution would be highly appreciated, but VanillaJS-based solutions would also work) Thanks in advance
  5. Hello! Is there an easy way to make the width of a span expand to like 500px and then collapse to 0, within a few seconds? Here is what I have so far: gsap.to('.block', {duration: 1, width: 500}, 0.2); I know when using keyframes it would be something like this: @-webkit-keyframes block { 0% { width: 0px } 100% { width: 500px } } Thank you!
  6. i'm trying to make one interesting hover effect on mouseleave event.But after 3 days of failers i steel have't any positive results. Did u ever seen somesing like this? https://likely-story.co.uk/ (hover "menu" on top right)
  7. Hi i want to make exact animation for testimonial section from this website (https://appinventiv.com/) at the end you will find testimonial section Please provide complete step by step tutorial i was noob to GSAP please help me
  8. Hello, I would like to make a page change, a transition from one section to another: Example: xxxx.com/about at xxx.com/contac is there any way to GSAP it? Gracias
  9. how to make Scroll with text fill like link below I have done everything I think I can do and have not had a similar result even I hope for any help and at least an idea http://clapat.ro/themes/hervin-wordpress/
  10. I am trying to use MotionPath to animate along a path and it is getting the correct data for how it should move but is not actually on the path which is what i need. The code pen shows this issue. The ship "orbiting" should follow and be on the red path.
  11. Hi So I'm a bit of a newbie when it comes to using Greensock and I also have an animation that was created by someone else. :-/ The animation uses GSAP to produce a bit of a lengthy animation that needs to be exported as an MP4 file. The animation is divided up into indivdual steps by adding labels for each one e.g.: TimelineMax.add("step1"); ..... TimelineMax.add("endStep1"); I have the original FLA file, so that I can change the current step to be played via a variable called 'step', which I can export as a SWF file and all plays fine - the animation starts and finshes at the desired step, objects turn on and off, tween etc. However when I try to export as an MP4 file the animation doesn't play correctly and appears to start mid-way through an earlier step. :-/ I'm exporting as follows: File > Export > Export Video Checking 'Convert video in Adobe Media Encoder' Setting 'Stop exporting' to 'After time elapsed' and entering plenty of seconds Export as a MOV and open in AME to output as MP4 So far I've tried everything from inserting enough frames in the timeline to actually taking the working SWF and using something like HD Video Convertor Factory but with very poor results. I just don't understand why it plays fine as a SWF file but completely different when exported as MP4? Anyone else had a similar issue? Unfortunately I can't supply a codepen because I have to adhere to data export restrictions. Many thanks Rich
  12. 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?
  13. Hi all, I've been using GSAP for awhile now, but am new to using Adobe Animate with GSAP. This is probably a simple question, but I can't seem to find out why scaling up objects in Adobe Animate using GSAP causes those elements to become extremely pixelated. Is there some kind of setting I am missing in Animate? Thanks!
  14. Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL
  15. Hello everyone... This is my biggest problem in Adobe Animate AS3 ever. So the problem is- I have 8 SWFs which have separate topic in each and one main SWF file and i want to connect all of them together like- Firstly i open Main SWF then it shows all the 8 topics name with each button. i used script from code snippets which is 'Click to load/unload SWF' and i assigned all the SWF as it required to open. I have created a button in each SWF to go back to main SWF using same code as i mentioned.... It is working properly but i realized that each time i click to open new SWF, it overlape on old one and when i open multiple times all SWFs, it become very heavy and get legging and hangs very much, consumes more memory... So what can i do to load new SWF and unload all previous SWFs by clicking on same button in each SWF ??????? Please give some idea with whole detailed script which i have to paste with button name and file name(u can assume any button name and file name). As i don't have enough knowledge about writing manual code. Please give some positive response. Thanks....
  16. Hi all, I am doing an interactive exhibit for my school's graduation showcase. In one of the exhibit, I implemented Tracking.js, which could detect colours using a webcam. The effect I want to apply is that, once the webcam detect a specific color, it will append the empty h1 and p tags conditionally (example: if detect Red, append h1 to Header A and p tag to Text A, if detect Blue, append h1 to Header B and p tag to Text B). I use jQuery's .text() function to edit the empty h1 and p tags once it detects a colour. However, the effect is quite abrupt. Is there anyway to use GSAP to animate it? P.S: In the CodePen, I did not put in Tracking.js as CodePen could not access the webcam. I used the .click function to show the .text() abrupt effect I was referring to.
  17. Hi there! I am making a png spritesheet animation. I have an animation existing of 7 frames which I want to animate back-and-forth. So: from frame 1 to frame 7 back to frame 1 again and back. Example: 1,2,3,4,5,6,7,6,5,4,3,2,1,2,3 etc. I tried reversing with "yoyo:true" but i cant quite get a seamless experience as you can see from the Codepen. The animation goes back to frame 1 before getting into yoyo. I would love some advice from you. Any advice would be appreciated!
  18. I am trying to create a minimap for a little game. First i started creating a full map in SVG, and then animated the player icon alongside the path. But is it possible to reverse the behaviour, so that the player icon stays, and the path itself, is animating, moving and rotating anchored to the player icon? Just like the image below. Any help is highly appreciated. current code: motionPath = MorphSVGPlugin.pathDataToBezier('#motion-path', {align:'#player-dot'}); TweenLite.set('#player-dot', {xPercent:-50, yPercent:-50}); tl.to('#player-dot', 2, { bezier:{values:motionPath, type:'cubic'}, ease: Power0.easeNone });
  19. Hello, First of all great tool for animating. I just start play with this and i want to create animation to circle around border of div. I create little pen for experiment but i can't figure out how to set transformOrgin just right. Is it possible to have some params from js as passing arguments ? If i change size of my circle div to animation follows ?
  20. The animation is not like I want, it should have a typical collapsing expanding experience. If you click the "Expand/collapse", you'll expand/collapse the content. It doesn't have the expected animation of the height when is scaling , when I click close (X) it shold do the reversing animation. Content should be pushed. console.log('click 1'); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { scaleY:0 ,transformOrigin:"center top", autoAlpha:0, ease: Linear.easeNone }, {scaleY:1, autoAlpha:1,}); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); console.log('click 2'); TweenMax.fromTo(".Tile .Tile-flyout", 0.8, { scaleY:1 ,transformOrigin:"center bottom", autoAlpha:1, ease: Linear.easeNone }, {scaleY:0, autoAlpha:0,}); TweenMax.fromTo(".Tile .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); Demo:
  21. Note: when you open the Codepen scroll down to the bottom Hello there! I'm a JS/HTML5 newbie trying to animate an IRC chat using HTML5/JS in Animate CC. My goal is to dynamically create rounded rectangles with text from the chat and load them onto the canvas from the bottom. New messages would pop up from the bottom of the list and push the other messages upwards. Currently, I have the WebSocket set up and listening to messages. When it detects a message it sends it to the queue where it checks if any animation is currently playing, then if not it generates a rounded rectangle and the message text and animates it coming up from the bottom of the screen. My problem now is, if I send another message, another instance of this rounded rectangle is created and animates on top of the old one. I tried instead pushing each object pair (the text and the rectangle) into an array and then accessing it from there, which works, however, I'm having a little trouble optimising it (I attached a codepen to demonstrate the effect I'm going for and the bloated spaghetti code) (and I don't know if this is the best way to do things). The messages would also need to fade out to the side after a certain amount of time, which would mean new messages need to start lower down again. So, I'm thinking maybe each message has some kind of timer that animates it being removed and removes it from the array so that newer messages can overwrite them? I'm not sure. Does anyone have any suggestions for how I could approach this? Any help would be greatly appreciated, thank you! EDIT: This was my attempt at iterating: (the main attached one is what I'm trying to achieve without manually specifying the Y position, as the height of boxes will be dependent on the size of the message).
  22. I'm trying to expand the content using GSAP, so I can have the height animated of the hidden content. If you click the "Sterilisers" button/product, you expanding the content. I applied GSAP but with not the expected result. Please advice what's the best way. $('.js-tile').richTile().on({ 'expanded.RichTile': function(event, tile) { // disable siblings on expand var siblings = tile.element.siblings('.js-tile'); siblings.richTile('enable'); siblings.richTile('collapse'); var currentTile = $(this); var $tiles = $('.js-tile'); $tiles.not(currentTile).addClass('not-expanded'); console.log('click 1'); TweenMax.from(".Tile.is-expanded .Tile-flyout", 0.8, { height:0 , opacity: 0, autoAlpha:0, ease: Power1.easeOut }); // re-enable when this tile is collapsed tile.element.one('collapsed.RichTile', function() { siblings.richTile('enable'); $tiles.not(currentTile).removeClass('not-expanded'); console.log('click 2'); TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut }); }); } });
  23. Hello, first-time poster here! I'm an HTML5/Animate CC newbie (and not really a dev in general, just doing this for fun and learning) and I was wondering if someone could tell me what I'm doing wrong here. I would like to be able to use GSAP to animate a vector file I'd add to the stage and would need to be able to make it animate when I call a function, however when I try to do this I keep getting cannot tween a null object, but if it's not wrapped in a function the animation plays fine. I created a new HTML5 canvas to see if I had the same problem, and I did: 1. Added a symbol to a blank HTML5 canvas, made it a MovieClip and drew a circle. I called the instance mcThing 2. In the Timeline, I selected the first frame and went into Actions 3. I wrote: function playAnimation() { TweenMax.to(this.mcThing, 3, {y:500}); } playAnimation(); 4. When testing in Chrome, I get cannot tween a null object. If I reference it as mcThing (omitting the this. I instead get mcThing is not defined. 5. If I then remove the function and just have this: TweenMax.to(this.mcThing, 3, {y:500}); It plays fine, but now I can't call it when I need to. Some context: Essentially what I currently have is a WebSocket listening for messages. When it receives a message, it's added to the queue. I am trying to get it to play an animation and insert the text from that message. The text itself should be okay: I used CreateJS to instantiate a text in the code and TweenMax works there, the problem is animating shapes/drawings. I suppose I could instantiate all the shapes in the code itself and TweenMax would work then but I don't think this is realistic as the animation/shapes are fairly complex, so I'm trying to target the stage. The animation would play out, stop, then the message would be removed from the queue and the next one would play (same animation, different text). I think this is a scope issue, but I'm not sure what I need to change. I have used GSAP in AS3 recently and it was working completely fine within functions. Any help would be much appreciated!
  24. 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?
  25. hi is anyone one know how to animate text on a curve path, i've attached a snap shot. can you please advice me to get this thing done.
×