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

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

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. Hello fellow animators, if you were previously looking on how to integrate Greensock into a WordPress Website, you have come to the right place. Today we launched AnimateWP, a WordPress animation plugin which is completely based on Greensock. You get the whole power of Greensock animations (browser compatibility, performance, advanced sequencing and all the other great features) without writing a single line of code. The plugin takes care of everything while you implement your timelines and animations on the graphical interface in the WordPress backend. Currently we have implemented almost every property you can animate with GSAP and are already working on implementing the powerful Club Greensock Plugins (like ScrambleText, SplitText and others) in the near future. DrawSVG is already available in AnimateWP. Moreover AnimateWP allows you to trigger and control your animations by scrolling. Therefore you don't have to worry about including ScrollMagic anymore. Check it out on animatewp.yourneeds.at or explore the docs.
  4. 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
  5. 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
  6. 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!
  7. 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 }); }); } });
  8. 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)
  9. 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
  10. 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
  11. 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/
  12. 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.
  13. 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
  14. please help me !! Sorry for the Google translation ( ㅠ_ㅠ) <style> .parent{width:500px; height:500px; background-color:#000} .parent .child1{position:absolute; width:100px;height:300px; display:none; background-color:#f00} .parent .box1{position:absolute; width:50px; height:50px; background-color:#0f0} .parent .child2{position:absolute; width:300px;height:300px; display:none; background-color:#00f} .parent.on .child1{width:50px; height:500px; display:block; background-color:#ff0;} .parent.on .box1{width:30px; height:30px; left:300px; top:300px;} .parent.on .child2{width:500px; height:30px; display:block; background-color:#0ff;} </style> <div class="parent"> <div class="child1"> <div class="box1"></div> </div> <div class="child2"> </div> </div> TweenMax.to(".parent", 1, {class:"+=on"}) //Does not work TweenMax.to(".parent .child1", 1, {class:"+=on"}) //Does not work I know that you can animate through classes. BUT How can I animate child elements through a class of parent elements?
  15. Hello How can I draw a line with animation on canvas? I want to draw animating line on my canvas chart can I draw a line using as lineTo canvas method and make animate it with GSAP?
  16. 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!
  17. 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?
  18. My very long "origin" story follows. TL/DR: I've attached some templates that people might find useful if they are building ads for AdWords using Adobe Animate CC 2017. <--- begin long story ---> I'm very new to HTML5, but I have many years of experience with Flash. That said, I'm a designer, not a coder, so trying to figure out what path I should take to move from Flash to HTML5 was like wandering around lost in a jungle, sans-machete. The last time I made the effort to learn how to make HTML5 ads was a couple of years ago and was less than successful. I ended up landing on Google Web Developer, since that appeared at the time to be the only HTML5 program that AdWords would accept ads from. That was so incredibly frustrating that I ended up going back to Flash CC 2015, animating the ads, then back saving the files to CS6 so I could publish them with the highest level of the Flash Library that AdWords would accept. Due to how long that process ended up being, we transitioned to using static ads instead of animated ads, and our clients were fine with that. I was relieved. All was right(ish) with the world. I was content to leave HTML5 behind and pretend like I would never need to figure it out. That ended in February. We have a client that wants to start running animated banner ads through AdWords. Back into the jungle I went. After learning that AdWords will no longer accept .swf files, I picked up GWD once again, and took a day to put together one ad that would show the client that we could do animated ads. If anything, GWD felt worse than it did two years ago. I banged my head against the wall trying to get text to do what I wanted, and ended up creating SVG shape files instead. I eventually got the ad mostly working. Sometimes a background shape didn't do what it was supposed to, and nothing seemed to fix it. It was not an ad that I was very proud of, but at least it was working. Mostly. I also calculated that it took me eight times as long to build that ad as it did for me to make a static ad. I sent the example ad off to the client and didn't hear anything back until last week. He sent us links to some ads that he liked, and asked if we could do something like that. They were pretty basic, the one he really liked was a bit sloppy, but I replied that we could do that, and also pointed him back to the example ad that I had sent before. Apparently his missed it, because he said that he loved it. It was exactly what he was looking for. For the heck of it, I decided to take a look at the code for one of the ads and see if it was made in GWD, or something else. Really hoping for something else. Around the middle of the HTML file, I saw, "UPDATES AND DOCS AT: http://greensock.com"... That's what led me here. Through watching videos, and searching the forums, I learned that Adobe Animate was basically Flash – or Flash enough that the learning curve would be pretty shallow – and that it could incorporate GreenSock. Oliver16Years was particularly helpful in pointing me down the correct path regarding the use of Animate versus hand coding, and that saved me quite a bit of time. The next hurdle I had to overcome was building an ad in Animate and getting it through AdWord's HTML5 Validator. I rebuilt my original ad, and when it came time to run it through the Validator, I got two errors; one involving missing this code from the <head> section: <meta name=“ad.size” content=“width=300,height=250”> Which I already knew about, and just forgot. The other involved fonts, which surprised me because I was using Google Fonts. Apparently, when Animate publishes the files it links to the Google fonts in a way that makes AdWords sad. Looking at the code, I couldn't figure out what needed to be changed. I asked for advice in another forum post and ohem helped out with his reply saying that I would be better off sticking with static text since Animate would automatically convert it to shapes when the file is published. So I've sidestepped that issue for now, and will revisit it if I need to down the path. I fixed those two things, resubmitted, and then got another error. Apparently, I needed to find this line in the published HTML5 file: <script src=“https://code.createjs.com/createjs-2015.11.26.min.js”></script> replaced with this: <script src=“https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js”></script> So I did that. Resubmitted, and then got an error for how I was direct linking the ad to a URL instead of using "clickTag"... Yeah, I remember click tags from my Flash days. I get it. You gotta track those clicks. The solution was (or appears to be) to add this script code to the HTML5 file (I put it below the <title>): <script type=“text/javascript”> var clickTag = “”; </script> And use this for the button code: this.btn_main_link.addEventListener(“click”, fl_ClickToGoToWebPage); function fl_ClickToGoToWebPage() { window.open(“clickTag”, “_blank”); } ... I believe that is correct. At least after doing that and resubmitting it, I didn't get any more errors. All of that was a lot of jumping around in the code side of things that I really didn't want to be doing, especially if/when we start rolling out animated ads to our other clients. Surely there was a way to make this work automatically? Why yes, yes there is. Thanks to this other forum thread I came across, I learned that I could go under the "Publishing Settings / Advanced" tab in Animate, and export the "Template for publishing...", modify what I needed to modify, and then import it back in. I totally took advantage of that. I set up the file so it would have all of the code changes, as well as including the GreenSock library. I tested the published file using the AdWords Validator, and everything was green. Then I made the other two common sized ads that we are always needing to make, to give us a full set: 300x250, 160x600, and 728x90. Then, because of a number of our clients are car dealers and have lengthy disclaimers that we need to cram into the ads, I made a modified set similar to what I used to do in Flash for a huge account at a prior job that include a rollover "disclaimer" button. I tested those in the Validator as well, not expecting them to work, but they did. They may not work when actually uploaded to AdWords though; I'm a designer, so I don't have access to that side of things to test. <--- end long story ---> I've attached my current set of templates to this post. They are set up with all of the basics you need to satisfy the AdWords gods (at this time, and as far as I know). 160x600, 300x250, 728x90 (two sets; one with a rollover for disclaimers and one without) built in Adobe Animate CC 2017 30 fps 1px black border (locked)... there may be a better way to do this. I fell back on my Flash experience when setting it up, but I'm certain there's a way to add a border to the ad through HTML. It was a low priority right now. click area (locked & hidden) 300 frames (10 seconds) already added to the timeline stop code on the 300th frame the GreenSock Library should already be include and working (it's included when published), but I haven't tested that part yet (still learning my way around GreenSock), and – again – I'm a designer, not a coder, so I may be missing something there I have not used these yet for actual ads that are up and running on AdWords. Once I have, I'll report back, and if any changes are needed to make them work, I'll replace/update the zip file. --- (edit) The rollover part of the rollover banners, as they are now, do not work when uploaded to AdWords. I will see if I can figure out what has to be done to make it work (if anything CAN be done). If any of you guys have an idea how to fix them, please let me know and I'll get the fix in and updated asap. --- (edit 2) Thanks to the responses below, I seem to have fixed the rollover issue so they work now with AdWords. I also caught a few more errors that I fixed as well. A new zip file has been uploaded. Until I actually use them for a campaign, I'm not 100% sure they will fly, but I'm hopeful. If anyone has a chance to use them before I do and would like to say how they worked, I would appreciate it. The disclaimers are in OpenSans, but you can change them to whatever works best for you, of course. Animate CC 2017 HTML5 Templates-AdWords-v2.zip
  19. 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
  20. 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....
  21. 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.
  22. 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 });
  23. 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!
  24. I' m sorry, but i start using gsap, from a few days, so my question may be a little silly... which is the best way to animate css background-position property? I've tried doing: TweenMax.to('.back', 8, {'background-position':300}); where '.back' is the element with background image. .back { background: rgba(0, 0, 0, 0) url("img/seq2_0000.jpg") no-repeat fixed 0 0 / 200% 100%; } but what i'm tryng to get is a kind of 'seamless loop' in the background for example a sky and clouds horizontal moving. Anyway GSAP is amazing!!!
  25. 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 ?
×