Jump to content
Search Community

Search the Community

Showing results for tags 'greensock'.

  • 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. First off, I have been diving into first attempts of javascript and animation, and simply love how intuitive and flexible gsap is. Amazing! That said, I've done plenty of animations where this issue did not occur, however for some reason I am facing some jerky easing on the two side elements you see in the codepen provided and can't seem to figure out what is causing the issue. Any ideas? Thanks!
  2. Hi there, I am trying to make 3 divs fold out from under one another and was going quite well until i noticed that the divs are sort of flickering when they get to the end of their transitions. Any help is appreciated! Thanks, Phil
  3. Hi! I am new to GreenSock animation so do not know very much. Can anyone recommend to me some other animations that might look good for my animated graph? So far, I incorporated the autoAlpha, scaling, animate.css. I am trying to draw the top line from the circle but it keeps scaling from the top instead of the bottom. Even putting a transformOrgin of '0% 0%' will not help. Any tips would help. I learned GreenSock from the ihatetomatoes Greensock paid course. I keep referring to the videos as well. Thanks!
  4. Hi all, Trying to animate a line between 2 random points inside a circle using drawSVG. That is the end result i am hoping for. But this is a learning experience so doing it bit by bit. However, i am now stuck. I can make the points appear (currently limited to 2) but would like to animate them in on the pointsTL timeline rather than using the pointer.appendTo("#circle").fadeIn(x);. I put an example in the top left to show what i am trying to achieve but happy for direction to get back on track at the moment in terms of setting up the gsap timeline. Any help is appreciated! Phil
  5. Hi, I am having a problem animating multiple icons with all of them hovering at once. I have tried each() etc. but can't seem to crack it. Ideally I would like to have it that on hover the timeline iconHover plays and then reverses when the mouse is taken off. Any help would be much appreciated, Phil
  6. Hi there, I am trying to build a project for work that is essentially a map based infographic. This is my first major project using Greensock so i am trying to do things step by step. First step. The icons that will display on the map. I have made these red in my example and was want each to open a box next to them. I was wondering the best way to do this? Of course at the moment when i click one they both open. Is the class best used to style in the css (e.g. .icon) and the id for Greensocks use? Any help is appreciated, Phil
  7. Hi, I am trying to do a simple nav that starts as a 'burger', animates to a cross and opens the menu on the right. I would then i would like it to change back to a burger and hide menu if the cross is clicked or an item in the menu is clicked. Does this involve switching between the onClick="menuIn()" and onClick="menuOut()" like they mention in this forum? http://stackoverflow.com/questions/5303899/change-onclick-action-with-a-javascript-function Am i even close? Thanks for any help, Phil
  8. Hi, I am trying to work out best practice to pause another play another timeline. I have included 2 attempts with the first commented out. Ideally i would like it to run so that in the sequence of the first timeline (tl1) it resumes the paused timeline (tl2). I'm not sure if this means that an onComplete need to be added or whether it can just be a command in the timeline. e.g. .from("object", 1, {})... .from("object", 1, {})... .resume("tl2") .from("object", 1, {})... Sorry if the syntax is incorrect just trying to explain my problem. Any help is appreciated. Thank you, Phil
  9. I'm building a off-canvas push menu and everything is working, there are a few aspects I can't seem to figure out. 1. How to disable the scrolling of the content-wrapper. 2. How to only scroll the off canvas menu. Right now it scrolls the height of the website itself. Here is a code pen to show you what issues I'm running into. http://codepen.io/icekomo/pen/LNwEWM Thanks!
  10. Hi there, I'm wondering if is possible to load an animation with different width and a small delay each time the width gets bigger. For example: This is the original code: The css for the <div cortana_blurb> is set to width: 0; MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .15, {width: 34, ease:Linear.easeNone}), .4; TweenMax.to(cortana_blurb, .15, {width:64, ease:Linear.easeNone, delay:.4 }); TweenMax.to(cortana_blurb, .15, {width:111, ease:Linear.easeNone, delay:.8 }); TweenMax.to(cortana_blurb, .15, {width:144, ease:Linear.easeNone, delay:1.2 }); TweenMax.to(cortana_blurb, .15, {width:204, ease:Linear.easeNone, delay:1.6 }); } What I want is to minimize it to one line code like: MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .15, {width: 34, 64, 111, 144, 204, ease:Linear.easeNone}), .4; } I know it's a trick one, but if there is a way to do it and you guy could help me it will be great. Kind regards, Fernando Fas
  11. Hi I'm trying to scale an image over a period of time but it appears jerky! Is there a way I can make it smoother? Please refer to Codepen URL. Thanks!
  12. Hi, I am trying to create an accordion menu using Greensock. Alot of the code I have used comes from this section of the forum. http://greensock.com/forums/topic/9110-accordion-menu-with-gsap/ Two things different that I am trying achieve are: Making 'one' open on page load. Add padding inside the content areas. (Seems to still add padding when the sections are closed.) Any help is much appreciated. Cheers, Phil
  13. Hi, I am trying to create a mobile menu using Greensock. When the page loads the menu automatically opens. When I add .pause() to the timeline this it doesn't work at all. Am I even close? Thanks, Phil
  14. Hi there, I am attempting to restart the #counter in this codepen example once the timeline has finished playing. Ideally i would like to trigger the restart (20 secs) from the timeline. I added the onComplete: "resetTimer" which is queuing this function and it didn't throw an error so i am wondering if I am on to something? function resetTimer() { var seconds = 20; } Any help is appreciated! Thanks, Phil
  15. Hi I'm trying to rotate an object around a central point. In this case the object is a pie. I want the pie to be spinning as it rotates! Any ideas? Many thanks!
  16. Hi Is it possible to make it so that the smaller pies in the attached codepen follow the same orbital path using bezier? Currently the paths are slightly different! Many thanks!
  17. I am testing an animation through Google Chrome which currently is not working. I do not receive an error but the console log reports "invalid pause tween value: true". In general, what does this mean? I searched the forums and did not find any topics on this message so I though I would go ahead and ask. If it helps, below is my code for the tween: var fadeOut = function (el) { var animation = TweenLite.to(el, .75, { autoAlpha : 0, bottom : "-=100px", ease : Linear.easeNone, paused : true }); return animation; };
  18. I have been looking at the trends on the award winning websites and reported the results in this article and video. I still continue to review these trends and will publish a summary of 100 sites of the day sometime in April. Here are some of the top sites using GreenSock for your inspiration or just to kill some time at work:) Adidas Ace 16 Publicis90 Jetlag Photos Concrete LCDA Tati Express Epicurrence No. 3 Around the World in 12 Dishes Control Films Sailing with Greenpeace Have a great day/night/weekend.
  19. Hi there, How can i stop the animation opening by default at the beginning but still keeping the toggle feature? Thanks, Phil
  20. Hi all, Trying to build a greensock slider with some code that i have put together from pens, tutorials etc. I thought i was going well but i have hit a snag. I wanted the first slide to have have another timeline inside of it where 3 elements animate independantly. these then all dissappear as the first slide does. The problem is when it repeats the first slide doesn't animate again. Is there a way to make it 'refresh'? Thanks for any help, this is probably a bit adventurous for me but really wanted to give it a go. After this i'm going to try and add the buttons. Phil
  21. Guest

    Greensock autoAlpha Flicker effect

    Hi there, Just a quick question. Is it possible to create a flicker effect when images fade using the autoAlpha: 0 effect? Something like this... (I thought Elastic would help but it didn't.) TweenMax.to("#div", 1, {autoAlpha: 0, ease:Elastic.easeInOut}) Thanks, Phil
  22. Hello, I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that: 1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background. 2) Set the container itself to scroll/drag and affect both div's together. 3) Change the speed the background div to be a little slower, in order to give the parallax illusion. So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help.
  23. I've been at this for a few days now (starting with Skrollr and now ScrollMagic), and I just can't figure it out: If I create an SVG animation - it completes 100% on my laptop screen. If I view the animation on a larger screen (with more viewport height), the animation doesn't complete (unless I allow the viewport to go beyond the footer, creating blank space). My question is this: how should I use ScrollMagic trigger points in a responsive design where the height of the viewport changes? I initially thought that I could trigger them on the percentage that the actual scrollbar has been scrolled - thus keeping everything in proportion (ie, fire SVG line when the scrollbar has been scrolled 50%), but it seems like this is not the case. If anyone could provide clarification on this, I would REALLY appreciate it! ps, I can create a CodePen if needed - though this is quite a general question that will be applied to animations throughout the site.
  24. I'm currently trying to build a slideshow to practice whatever I learn about Greensock. Most things behave as expected, except for when I click next/prev real fast. In that case the slideout animation never gets fired, and the next time I reach the same slide, everything is already animated. What would be the best way to prevent this from happening? Thanks! Small edit: Got the same with this pen: http://codepen.io/aderaaij/pen/QjedBd
  25. Guest

    Animation based on Browser height

    Hi there, I am starting from scratch here so apologies. I have been asked by a client to trigger an animation (similar to a banner ad) based on the browser position. It would be great if the animation then reversed on scroll up. Two Q's... 1. Is this possible with Greensock? 2. Where do i start? My Codepen example is an attempt at recreating the site that the animation will eventually live on. Thank you so much for any help, Phil
×
×
  • Create New...