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
  • 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. I am trying to morph SVG on scroll. I have two shapes with id's #shape-1 and #shape-2. What I want is after say 20px of scroll shape-1 morphs into shape-2 and when we again scroll back up the shape-2 reverts back to shape-1. I am able to morph the first time but can't seem to get the proper logic to morph every time the user scrolls above or below a certain scroll value (20px for instance).
  2. Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary
  3. Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/
  4. Hi, i do some basic mistake in my code, please look to my codepen. You will see in result title/subtitle than empty hole and at the end two closing links. But I wanted to have visible some form/marketing stuff which i call .js-main-boxies and hidden divs with classes .js-cta-form1 and .js-cta-form2. My timelines are paused by default, so question is why I see broken version and not correct one? pen is without CSS so problem can not be in that. When you remove timelines tlMeetingFormClose and tlOnlineFormClose it works, but of course closing functions not. Interesting is that when you click on "form 1 close", than click on "click 1" you will see posibility of clicking to "form 1 close", but it is not working. Any help or advice appreciated thx
  5. I've done this before, and i can't figure out why it's not working this time. I'd like to increase the width of #tube-liquid at a certain point in my timeline. Right now i have the property set as .to(tubeLiquid, 2, {scaleX:50}); The scale of the rectangle will not increase, and it's simply ignoring me not giving me an error. What am i missing when it comes to using ScaleX, ScaleY within GSAP?
  6. Hey guys, I'm trying to create an animation for a cup of coffee that has hot steam leaving it. The idea is to have 2 curved lines that constantly move up on the y-axis. The top and bottom of the paths are hidden behind a mask. My goal is to have the paths constantly move up with the illusion that it's constant. Right now you can see the path has to stop, then reset its position before moving back up. I hope this makes sense. Is this possible?
  7. Hello! I am currently trying to mimic the effect on this website: http://brightmedia.pl/ If you scroll down in my codepen you can see a similar effect with the line being drawn. I was wondering if anyone knew/has done this before and could provide me any additional information in: A. How do I keep the point of drawing in the middle of the window B. How do I go about adding extra paths to the animation? Do I get seperate SVGs to trigger on scroll? Thanks for any help in advance
  8. Hello all, I have encoutered two problems with gsap. The first one is that I want to make a filter animation with gsap, in which I may modify several css filter properties at the same time. -webkit-filter:saturate(1) hue-rotate(0deg) brightness(1) contrast(1)) grayscale(0.5) How can I set these filter properties in gsap timelineLite? Expecting the similiar way like transform: timelineLite.to(element,{x:100,scaleX:2,rotation:30}) And How can I get these filter properties in separately in progress ? Expecting the similiar way like transform: element._gsTransform.rotation The second one is that how does gsap perform in mobile device with dozens of elements animating at the same time,maybe 30 or 40, and each element animation many have several tweens. Under this situation,which will perform better, css animation or gsap? Any help very much appreciated! I'm looking forward to your reply, thank you very much.
  9. Giannis

    GSAP & popState

    Greetings to all, I came across a fade out & in between pages tutorial using pushState (https://inkplant.com/code/fade-out). The code used is as follows: function fancy_nav(new_url,new_title) { window.new_url = new_url; window.new_title = new_title; var animationOutTl = new TimelineLite({onComplete:change_content}); animationOutTl .to.... .to....; } function change_content() { source_url = window.new_url; $.ajax(source_url).done(function(data) { $('body').html(data); history.pushState(null, window.new_title, window.new_url); document.title = window.new_title; var animationInTl = new TimelineLite(); animationInTl .to.... .to....; }); return true; } What I can't get around, is how to set the popState to reverse the animations (animationOutTl & animationInTl) when the browser back button is clicked. Any assistance will be greatly appreciated. Thank you for your time
  10. Hello. Trying to figure out a way to use fade out and fade in when user clicks on navigation. Essentially, user click on navigation, the current page fades out, and the clicked navigation page fades in. $(document).ready(function () { //navigation button that appears on the home page var aboutpageButton = $('#aboutpageButton'); //homepage id var homepage = $('#homepage'); //aboutpage id var aboutpage = $('#aboutpage'); aboutpageButton.addEventListener("click", function() { //add code for page fadeout //e.preventDefault(); TweenMax.to(homepage, 3,{opacity:0}); TweenMax.from(aboutpage, 3,{opacity:0}) }); }); any help greatly appreciated. Thanks!
  11. Hi again forum. So we've been noticing this for several months, and it's in both Flash and GSAP. When we use from tweens, whether it be TweenLite, TweenMax, or TweenNano, the elements initially load in their starting position, before the .from positions are initiated, giving a poor load experience. An example would be: http://codepen.io/GreenSock/pen/yyBGYg Notice all the elements pop onto stage, then go to their starting positions. It seems to be mostly an issue in Chrome. It's strange, because I've built many a unit previously that this never would happen in, and then one day it just started happening. I must prefer using from tweens vs to tweens so this error does cause extra work. Any ideas?
  12. Hello, I am trying to mimic an animation -> the first scroll animation on this page https://www.box.com/ So far as you can see from my codepen I have mimic'd it (Kind of). I am looking for better ways/any extra help/tips and tricks anyone can give me. Please go ahead and fork my codepen, and give it a go for yourself. I may have done it completely wrong, this is a learning experience for me. Hope to see some comments in this discussion. It's a pretty hard animation to mimic. Should I be using SVGs to mimic this animation? Thanks
  13. Hello, For some reason when I add 'position: absolute' to my 'box' class, it breaks my whole animation. Any explanation why is greatly appreciated. Cheers
  14. I'm getting pixelation when using pixi.js sprites with gsap. I doubt this is a gsap or pixi problem, I'm sure it has to do with how I'm combining them. in the codepen example: pixiBug on left is pixi.js & gsap and we're getting pixelation on scale down domBug on right is DOM & gsap and edges are smooth no matter the scale. What am I missing here? Thanks!
  15. Hi, I am working with GSAP + ScrollMagic. There in codepen when you scroll to bottom you can see "eating animation" it is sprite animation based upon shifting background. Well my problem is visible when "burger is gone" and you try to scroll up. You will see backward animation of eating which in my case is not what I want. Is there a way how to play some animations only in "one way"? Idealy completly avoid "eating" animation when you go up. I tried to google it and search, but without result, if it is already answered please send me link. Thx
  16. Hello! I have some issue with show elements. I fill svg line with help property stroke: function pathPrepare ($el) { var lineLength = $el[0].getTotalLength(); $el.css("stroke-dasharray", lineLength); $el.css("stroke-dashoffset", lineLength); } But I don`t know how can show element when fill before it (elements are hidden). They are conected only alike scene and they have absolut position. Maybe GSAP or Scrollmagic have some functions for decide this problem? Or maybe give me some hints. My code: // Init ScrollMagic var ctrl = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 0, tweenChanges: true, duration: ScreenHeight } }); // Create scene $("section").each(function(){ new ScrollMagic.Scene({ triggerElement: this }) .setPin(this) .addTo(ctrl); }); var processLine = '#process-line'; // prepare SVG pathPrepare($(processLine)); var s4Tween = new TimelineMax(); s4Tween.to($(processLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone}) .add(TweenMax.to(processLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0); // Create scene var scene4 = new ScrollMagic.Scene({ triggerElement: "#section3" }) .setTween(s4Tween) .addIndicators({name: "1 (duration: svg)"}) .addTo(ctrl);
  17. After i uploaded the .zip file to the browser it shows 3 errors 1-Missing Primary asset check 2-Relative asset check 3-secure URL check I used Edge animate And in the creation complete i used "" var mobile = sym.$("mobile"); var logo = sym.$("logo"); var t1 = sym.$("t1"); var bx1 = sym.$("bx1"); var buynow = sym.$("buynow"); TweenLite.from(mobile, 1, {y: "30",alpha:0, delay:1,ease: Back.easeOut }); TweenLite.from(logo, 1, {alpha:0, delay:2,ease: Sine.easeOut }); TweenLite.from(buynow, 1, {scaleX:0,scaleY:0,alpha:0, delay:4,ease: Elastic.easeOut }); TweenLite.from(bx1, 1, {x: "30",alpha:0, delay:2.5,ease: Back.easeOut }); TweenLite.from(t1, 1, {y: "10",alpha:0, delay:3,ease: Back.easeOut }); "" i need help please !! I can't understand what to do ?
  18. I'm at a loss here folks. lol Basically, if you check out the Codepen, and try to scroll up or down no scrolling occurs... If you manually resize the window then the scrolling magic happens. Has anyone encountered anything like this before? Thanks, Nick
  19. Hi, i´ve got a problem with SplitText which i just can´t figure out. As you can see here: https://codepen.io/VSDC/pen/ZedMzB there is a simple SplitText animation which gets revert() when the animation is done. As the text gets revert it makes a litte jump/bounce. This effect is even stronger when i use webfonts from TypeKit (even after waiting until the font is loaded, before rendering the Timeline). Am i missing something obvious? Thanks a lot for your help!
  20. Hi, I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good. However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page to load. Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again. Any help greatly appreciated! NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.
  21. I've been playing with the morphsvg bow and arrow demo: http://codepen.io/chrisgannon/pen/epZyEK?editors=0010 I was trying to get a wiggle strain when the bow was fully pulled, and using CustomWiggle and rotation with easeInOut produced some cool results, but I was trying to get the Bow and string to relax part of the way back to the relaxed/straight state. Is there anyway to animate a wiggle ease in and out partway back through an animation? Thanks.
  22. Hi, I'm fairly new to GSAP and have been getting to grips with it reasonably well i think I'm using scrollmagic and Tweenmax for an image sequence on scroll. The code below works fine locally but when hosted on a server the image sequence is really jumpy and missing images. In chrome i am getting net::ERR_CONNECTION_RESET error in the console window...should i be using some sort of image preloader? have i missed anything? or is there a better / easier solution for this? HTML: <div id="trigger1"></div> <div id="pin1"> <div id="imagesequence"> <img id="myimg"/><br> </div> </div> JS: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script> <script> var controller = new ScrollMagic.Controller(); // define images var images = [ "images/3Drotate/1.jpg", "images/3Drotate/2.jpg", "images/3Drotate/3.jpg", "images/3Drotate/4.jpg", "images/3Drotate/5.jpg", "images/3Drotate/6.jpg", "images/3Drotate/7.jpg", "images/3Drotate/8.jpg", "images/3Drotate/9.jpg", "images/3Drotate/10.jpg", "images/3Drotate/11.jpg", "images/3Drotate/12.jpg", "images/3Drotate/13.jpg", "images/3Drotate/14.jpg", "images/3Drotate/15.jpg", "images/3Drotate/16.jpg", "images/3Drotate/17.jpg", "images/3Drotate/18.jpg", "images/3Drotate/19.jpg", "images/3Drotate/20.jpg", "images/3Drotate/21.jpg", "images/3Drotate/22.jpg", "images/3Drotate/23.jpg", "images/3Drotate/24.jpg", "images/3Drotate/25.jpg", "images/3Drotate/26.jpg", "images/3Drotate/27.jpg", "images/3Drotate/28.jpg", "images/3Drotate/29.jpg", "images/3Drotate/30.jpg", "images/3Drotate/31.jpg", "images/3Drotate/32.jpg", "images/3Drotate/33.jpg", "images/3Drotate/34.jpg", "images/3Drotate/35.jpg", "images/3Drotate/36.jpg", "images/3Drotate/37.jpg", "images/3Drotate/38.jpg", "images/3Drotate/39.jpg", "images/3Drotate/40.jpg", "images/3Drotate/41.jpg", "images/3Drotate/42.jpg", "images/3Drotate/43.jpg", "images/3Drotate/44.jpg", "images/3Drotate/45.jpg", "images/3Drotate/46.jpg", ]; var obj = {curImg: 0}; // create tween var tween = TweenMax.to(obj, 0.5, { curImg: images.length - 1, roundProps: "curImg", repeat: 0, immediateRender: true, ease: Linear.easeNone, onUpdate: function () { $("#myimg").attr("src", images[obj.curImg]); } } ); // init controller var controller = new ScrollMagic.Controller(); // build scene var scene0 = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 800}) .setPin("#pin1") .setTween(tween) .addTo(controller); var triggerHook = scene0.triggerHook(); scene0.triggerHook(0); </script> Any help or a point in the right direction would be much appreciated
  23. GreenSock Community, I hope all is well. The ISSUE - Global Var not being Passed to local onComplete - onStart etc. Has anyone else experience this issue? Or is it something I am doing wrong? See below. It's not a GSAP issue, as far as I can tell... I created a simplified Codepen using just jQuery for testing. Here are the links: Codepen with GSAP - https://codepen.io/jh-thank-you/pen/pedXxO Codepen without GSAP - https://codepen.io/jh-thank-you/pen/QpaWbg Snippet from my Stack Overflow post: Thanks for any help/advice.
  24. Hi, after having followed the forum, checking many examples and watching some tutorials, I have started playing with GSAP and so far it has been really fun. Now I have used Jonathan's example of the slider with controls (this one: https://codepen.io/jonathan/pen/qqmBjQ ). It worked quite well, but now I am stuck on two things. So I thought now would be a good opportunity to start posting in the forum Is it possible to have autoplay just run once and stop at the last frame? And how could I add digits that let me navigate to each slide and show which slide is active? Here is my example: https://codepen.io/lukenicktap/pen/peLreK For the autoplay I tried: function loopCheck() { $currentSlide++; if ($currentSlide < 2) { TweenLite.killDelayedCallsTo(play); } But this does nothing. If anyone could point me in the right direction, I would really appreciate it. Cheers, Lucas
×