Jump to content
GreenSock

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

Search the Community

Showing results for tags 'animation'.

  • 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. Hello, I would like to know if we can create a retro game using GSAP? Is it really possible for beginners to create their own basic game using GSAP? Even without physics in the game just to control the character only. Or even control a snake in the snake game. Anyone tried to create a game using GSAP? Can you please share it?
  2. I am trying to improve my CSS animation skills by recreating concepts I find on dribble but this one is giving me a hard time: https://cdn.dribbble.com/users/73241/screenshots/3543071/attachments/787158/att_split_00.gif I am unable to figure out how to recreate the sound visualizer's effect. I am able to setup a normal sound visualizer with bars for the frequencies but I am unsure how to approach the special effect or know if it's even possible. I have been using "shooting fountain" as a reference for it's animation but surely I have it's terminology/description wrong. Currently I am using canvas to setup a mock for it but the effects are far too complex for my experience so I am trying to find alternative methods to replicate the effect. I am looking at potentially using the GSAP's physics plugin to simulate the gravity and draw the particles themselves but I am unable to find any references to study from. I appreciate any suggestions or references that can better help me achieve similar results. Thank you for your time.
  3. I'm very new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this gold bar across the screen (and fade it in/out) in three tweens. However, between each tween in the timeline is a distinct pause for a quick moment before the next tween begins. I tried firing the tweens before the others finished, but that seemed to break the animation when it repeated. How do I make this animation one continuous motion and allow it to be repeated indefinitely? Here is my js right now: var $loader = $('#load'), tl; tl = new TimelineMax({repeat: -1}); tl.from($loader, 1, {x: '-=40%', transformOrigin:"0% 50%" , autoAlpha: 0, scaleX: .2, ease:Power2.linear}) .to($loader, 1, {x: '+=60%', ease:Power2.linear}) .to($loader, .8, {x: '+=10%',autoAlpha: 0, scaleX: .2, transformOrigin:"100% 50%" , ease:Power2.linear});
  4. Hi, I want to know how to clear all the animated properties from TimelineMax at once. not individual. like onComplete clearProp all or something like that and all the nested elements also. is there a way to use wildcard selector? ex: var tl = new TimelineMax({id:"sliderOut", autoRemoveChildren:true, onComplete:function(){ // i want to clear all the animated values and properties at once not individual }}); tl .staggerTo($nameSplit.chars, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"+=0") .staggerTo($descSplit.words, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5") .staggerTo($techSplit.lines, 0.4, {x:'10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5") .to($slide_img, 1, {yPercent:'10', autoAlpha:0, ease:Power4.easeOut},"-=0.5") .to($slide_left_svg_bg, 1.5, {x:'20%', autoAlpha:0, ease:Back.easeInOut},"-=0.5") .to($slide_right_svg_bg, 1.5, {x:'-20%', autoAlpha:0, ease:Back.easeInOut},"-=1.5") .staggerTo($staticTitleSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5") .staggerTo($numSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5") .to($left_out_bg, 0.5, {x:'100%', ease:Power4.easeOut},"-=0.5") .to($right_out_bg, 0.5, {x:'-100%', ease:Power4.easeOut},"-=0.5");
  5. Hi all, once again apologies for the lack of Codepen link, it keeps complaining that I am spam when I try to fork, even though I am not even logged in. Anyways, I have made a JSFiddle instead. I am hoping my issue is pretty simple, not even sure it is related to GSAP. So I have two sections. Within the top section, I have an image which I have placed at the bottom using flex. The idea is simple, as I scroll down, the image should slide up into place. I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section, instead of behind it. Ideally, you should not be able to see any of this image within section 2. I have tried giving some z-indexes, but this does not seem to make a difference. Is there any way to stop the animated image from sitting on top of section 2? Thanks
  6. Hi forum! How are you today? I'm working on an animation that I want to trigger and sync to the scrollbar, but start in the middle of the page, and return the scrolling the page when finished. This is what I thought about doing: [content] [ANIMATION PLACEHOLDER which is height: 100vh;] [empty section] [ANIMATION which is floating and set to display: none; and height: 100vh;] I put a scroll scene trigger at the start of the ANIMATION PLACEHOLDER section. the animation duration is set by javascript. the duration will change the ANIMATION PLACEHOLDER height to get the correct duration injected into that scroll section: pre-animation: set height of ANIMATION PLACEHOLDER to animation duration (should be 2 screens or 200vh) animation: make ANIMATION appear (I don't want the animation to scroll off screen) make ANIMATION PLACEHOLDER stick to top of it's section (when animation is set to reverse, this will make the placeholder appear in the correct place) move two boxes in the ANIMATION synced to the scroll (for now) make ANIMATION PLACEHOLDER stick to bottom (so it will appear as if you just continued to scroll) make ANIMATION disappear This seems to work for the end of the animation, but the animation (at least the set) starts as soon as the page loads. maybe it has something to do with immediateRender? I want the floating ANIMATION to appear only when the scroll trigger reaches the top of the screen. The animation itself does trigger at the right moment (only when the trigger reaches the top), but the set part happens immediatley thanks for the help Neil
  7. 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.
  8. Hey guys, i was lookin on the forum and on the internet to finds something about a show/reveal text animation. I want to draw a line in html and out of that line the text is revealed. almost like you lift a curtain and the text is revealed. Looks very simulair like this. i tried to wrap a text element inside of a div with an overflow and then with gsap lift the div wich will reveal the text behind it. Didnt get that to work unfortunately since the elements both move when i try it. Any suggestions on how to achieve this?
  9. 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.
  10. Hello! I want to make cyclic animation I use TweenMax.staggerFromTo. For this purpose I want to restart function with animation. How to me to make it? onCompleteAll does not work. It is started constantly during animation, but not at the end. Forgive for my English.
  11. hi! In the code pen you see an animation for the menu. I use the splittext plugin as you can see. First time you open the menu, everything animates as intended. But after closing once, the second time it seems like it's ignoring the timeline. Been fiddling with it for a long time but can't seem to figure it out. Anyone has a hunch of what's going wrong?
  12. Hello! I'm trying to do a simple animation. In this animation the hour hand and the minute hand of the clock animates to mimic a clock. Everything is working as expected in all browsers except Internet Explorer/ Egde (surprise surprise). The problem I'm facing is that Internet Explorer/ Edge is not honoring the transform origin property being applied on the hour and minute hand of the clock. Anyone else faced a similar problem before? Oddly enough I've made many complex animations using GSAP but Internet Explorer never behaved like this.
  13. Hi, The library is great. Loves to use it to create animations. I was using it will scrollMagic library. I wanted to know if there is any way I can detect if the animated element is scrolled out of the browser viewport when the user scrolls the page up so that the animation can be reset. Right now when it is scrolled down the animation is playing in the reverse direction. I just want the animated element stays in its final state as long as it is in the screen and when the user scrolls up and the element goes out of the viewport I want to reset it so it can play again when it is scrolled down. just like the title animation in http://carv.ai
  14. I'm new to greensock, and I realy like it sofar. Here is my problem. I have 2 div.product's and inside are 2 children, one needs to animate to the lef and one needs to animate to the right. I want this to happen for every .product div , but in sequence. Right now the animation starts with both the .left divs, and after that the .right divs start to animate. Is it possible to index the .product divs? and iterate over each one, no matter how many .products div there are? I would like to stagger them in sequence but I can't figure it out and I hope I'm explaining myself right...
  15. Hey guys, I have been struggling to achieve some ( i guess ) basic gsap stuff. What i want to achieve is a text that comes in from out of the screen to the center of the screen and then stays there for a couple of seconds and then moves out of the screen again. Now it is time for a new text that comes in from the left goes to the same position and moves out of the screen again. I tried to achieve this but the problem that i've encountered what that the 3 text items where overlapping eachother at the start. the other 2 text items need to be invisible when the 1st one moves to the center. step 1 : black screen. step2: fade in text 1 to the center of a div coming from the left side of the screen step 3: after a couples of seconds fade out text 1 and disappear. step 4 : text 2 becomes visable and fades in from the left to the center. step 5 : stays there for a couple of seconds --> moves out of screen again step 6: repeat process. I have also drawn to explain, since english isnt my native language. Thank you guys, greensock is awesome!
  16. Hello! It's my first time useing the tick event provided by greensock, and i am having trouble to figure it out what i am missing in my code, because there are signs that something is not right. Well the concept is that there is a horizontal scrolling area (with iscroll.js), and during scrolling the upcomming element should scale up / animate to it's full size. I use the TweenMax.ticker.addEventListener('tick', myfunction) on line 312 to call the function which detects which box should be animated. On every tick event the selected box(es) properties get updated with TweenMax.set. The problem is that the performance is not right, there is a flickering during scrolling and in IE11 it is even worse (very jumpy). I have put together a fiddle to see it in action: https://jsfiddle.net/LaszloOveges/yykc0356/ Anyone has an idea what is wrong with this code? I would really appreciate any comment. Cheers, Laszlo
  17. I got two issues when I want to use css "clip-path" and its attribute "inset". The first one is I can't make it work as animation, I want it to move to Clip-path:inset(50% 0px 0px) slowly, but it doesn't work. The second one is I can't use something like Clip-path:inset (-50% 0px 0px),I want to use minus parameter, but still not working How can I make these work with GSAP? Thanks
  18. Hi guys, this is my first attempt with GSAP, i would like to have any opinion for improve performance or the animation.
  19. Hi All! I'm a newbie and i hope somebody can help me regarding a matter. Here below a short explanation. I'm trying to create a Preloading animation using Gsap. As you can see i have created a little SVG sample, then i have animated It using a timeline (nothing complicate and i hope i did it in the right way): At this point i want something that work in this way: A percentage progress linked with the Timeline. I have tried in many ways but nothing seems to work as i want. I know that the solution require a Javascript code but i don't know how to put Javascript and Gsap together. I hope I was clear, Thanks in advance. Dave
  20. I'm trying to tween an element that has a relative height and it sits inside a container with relative height using absolute positioning. The desired tween animation is to move the element from the bottom of the container until it reaches the center. I'm also using scrollmagic as this animation should only appear during scroll to this container. I tried a few ways first way: default css of the element is already absolute positioned to center, container { position: relative; } element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } get the height of the element and its container. Minus off the element height from the container height. divide result by *two pass this height as a parameter in tween created window resize function and update the heights and also refresh the scenes scene is updated but tween is not. The culpit here is Tween not refreshing the variables on resize. Second way: default css of the element is at the bottom of the container with bottom: 0; position is still absolute used a to tween with top: "50%", yPercent: -50 this doesn't put the element in the center it's not centered and it only moves slightly The culpit here is using bottom: 0; and that breaks the absolute centering. Without bottom zero it works but the element comes in from outside of the container. Is there a workaround to this? Please help. Thanks!
  21. https://panike.pt/sustentabilidade/ Above website has really nice animation. If you see at the left side bullets. Those bullets gets filled with red when we scroll down and hover on them. They used top and translateY css property to achieve this but I am new to greensock and trying to create using greensock. Could you please help me. Thanks
  22. Hi ! I'm starting with TweenMax and got stucked with an issue. I have a menu which each links can start an animation but they can overlap and make the tween bug. I'd like each function to complete before being able to start another one. I've found that I should use onComplete but I don't get what I am suppose to do then. I've made a JSFiddle to demonstrate the issue I have. On .mouseover, the tween start but if I hover too fast on an other link, it bugs. :/
  23. Rosario Borda

    Live record

    Hello Guys, I'm involved in searching a tool for live record a movement of a sprite in an animation, in GSAP. Like the "Live Record" feature in Core animation, described as: Any idea? Many thanks, Rosario
  24. Hi guys! I'm new and I'm currently watching the intro videos and while I'm at it, I just want to drop a question. In http://roninamsterdam.com after the preloader, there's a text "Ronin" being animated letter by letter. When it's done animating the word, it scales/zooms in to letter R to the size of your screen, and the white fill becomes transparent to show the image inside/behind the letter R. Can it be done with GSAP?
  25. 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.
×