Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 12/04/2018 in all areas

  1. If your goal is to sequence several timelines, I personally think it's much cleaner to go with option 1 or 4 because you it gives you a centralized place for control. When you string things together with callbacks, there's no way to really scrub back and forth through the whole sequence or check the overall progress of everything, etc. I mean, it's totally fine to do callbacks if you prefer - I just don't think it's as elegant personally. You can't really reverse everything either (well, you could, but it's a lot more cumbersome). I would STRONGLY recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/ To answer your question, here's more pseudo code: //reminder: I personally don't recommend this strategy, as I think it's usually cleaner to nest timelines var tl1 = new TimelineLite(); tl1.to(...); //add whatever animations. var tl2 = new TimelineLite({paused:true}); tl2.to(...); //add whatever animations var tl3 = new TimelineLite({paused:true}); tl3.to(...); //add whatever animations; //when tl1 is done, play tl2 tl1.eventCallback("onComplete", function() { tl2.play(0); }); //when tl2 is done, play tl3 tl2.eventCallback("onComplete", function() { tl3.play(0); }); Here's my recommended approach: var tl1 = new TimelineLite(); tl1.to(...); //add whatever animations. var tl2 = new TimelineLite(); tl2.to(...); //add whatever animations var tl3 = new TimelineLite(); tl3.to(...); //add whatever animations; var master = new TimelineLite(); master.add(tl1).add(tl2).add(tl3); //now you can control everything with master! //jump to the middle of the entire sequence, for example master.progress(0.5); Happy tweening!
    4 points
  2. You need to user horizontal scrolling for this, so you can trigger animations just as you do while vertical scrolling. Check out all other examples on that site, it has demo for almost everything. http://scrollmagic.io/examples/basic/going_horizontal.html If you don't want to use horizontal scrolling then you can use intersection observer API to trigger animations, https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
    4 points
  3. We do have to keep our support focused on GSAP here. That being said, I made this example as an answer to another forum question and it may help you. It uses pins and triggers a new animation for each panel. Happy tweening.
    3 points
  4. Welcome to the forums, @Marlon! I used to be purely a designer and had absolutely no idea how to code anything. I was afraid of code for a long time. "Designers don't code and coders don't design", I thought. I was wrong. It took me a while to learn, but oh my gosh - it's so much fun! Once you get the hang of it, you'll be hooked. If you want to build banners, I'd HIGHLY recommend biting the bullet and digging in to learn HTML, CSS, and JavaScript. Be patient. It won't happen in a matter of weeks, but in the end you'll make yourself more marketable and you'll definitely make higher quality banners. I've heard from many designers who used to only build banners in graphical user interfaces and then they learned GSAP and they're like "oh my gosh, I'd NEVER want to go back...I can build things so much faster and more efficiently with GSAP." But yeah, at least a basic knowledge of HTML, CSS, and JavaScript are a must. In my opinion, it'd be very odd to try to use GSAP without knowing any JavaScript. That would be like learning to sing a Spanish song without knowing any Spanish whatsoever. I guess you could technically try to memorize the individual sounds and string them together, but it'd make things SOOO much easier if you actually knew what the words were saying and why they're put together that way. Don't fret - if you put in the time, it'll start to make a lot of sense and you'll probably fall in love. Plus it'll take your career to a different level. Happy tweening!
    3 points
  5. There are many ways actually... //after you build out both timelines, simply add tl to start (by default it'll be placed at the end): start.add(tl); //or you could add a delay to tl: tl.delay(start.duration()); //or you could pause tl initially and use an onComplete: start.eventCallback("onComplete", function() { tl.play(0); }); //or you could drop them both into a master timeline, sequenced: var master = new TimelineLite(); master.add(start).add(tl); There are a few other options but I don't want to overwhelm you Does that help?
    2 points
  6. You can ease into GSAP by using tools like Animate or Google Web Designer (GWD) for design work. I'm a hand-coder, but must admit that Animate is a much better than GWD since it's been around for far longer. Both products support let you insert GSAP code into them, which gives you the flexibility of designing with a GUI with the time-saving power of GSAP to tween everything. Once you get a hang of the GSAP syntax, you can move into pure HTML, CSS and JS.
    2 points
  7. Hi @selfishound and Welcome to the GreenSock Forum! Sorry your having issues! To add to all the helpful advice given above When i look at your SVG markup in the HTML panel, it looks malformed, its missing the ending </svg> tag. You will notice after the </filter> ending tag there is no ending <svg> tag. Some browsers can render your code wrong when it is malformed, and cause some havoc when rendered. You should run your SVG code in an online svg optimizer to make sure its optimized and clean from uneeded whitespace. Online SVG Optimizer and Cleanup tool: https://jakearchibald.github.io/svgomg/ Also you might want to place your <filter> tag inside an SVG <defs> tag. SVG <defs> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs <defs> <filter id="logo-f"> <feGaussianBlur id="logo-blur" in="SourceGraphic" stdDeviation="0"/> </filter> </defs> Here are some examples of animating SVG filter blur using GSAP: And this other one animating SVG filter blur: And then there is also animating CSS filter blur property examples: And this other using GSAP to animate CSS filter blur property with the GSAP SplitTextPlugin . Just my 2 cents, hope this helps
    2 points
  8. Hello Gabriel, I do not know if this is what you wanted to do, but I have adapted your pen so that it changes the contents of the hover text according to the clicked dot, to achieve this I used the date attribute in the dots, inserting the desired text. Making it easier to manipulate via html, but could create the texts in other elements or via JavaScript. And includes navigation with the prev and next buttons. I hope this helps you in some way: Bonus: I put an opacity system in the dots to know which one is active.
    2 points
  9. Check out Dom3D, then use GSAP to animate!
    1 point
  10. Thanks for the warm welcome. I'm well versed with HTML and CSS. I just hack my way through JavaScript by looking at the code, trying to make sense of it and playing around with it until it works. But I won't be able to do it from scratch. I'm gonna have to dive in, GSAP is too irresistible!
    1 point
  11. Sure, this is totally doable. It looks like it's pretty much animating rotationX. Are you asking someone to build it for you? Based on your other post, I'm not quite sure what you're expecting. We're happy to answer GSAP-specific questions here, but we don't have the resources to do custom consulting work or build entire solutions out for people. Perhaps a good place to start is either some video courses (there are tons of options) or if you're in a time crunch, it may be time to hire an expert to show you the ropes (or do the project for you). Feel free to post in the Jobs & Freelance forum.
    1 point
  12. Wow! completely blown away by all the work! How do you guys keep the images so crisp? Do you build the ads on bigger resolution then resize to final spec?
    1 point
  13. I used jquery to speed up the process hahaha . But basically the dynamic consists of linking the text to the clicked element, and the text you can change to the correct using the data attribute, or if you prefer using an array with in the javascript itself.
    1 point
  14. I believe that if you create an Example in Codepen with what you are trying to do, it will be easier to help you. Take a look at this: On making a TimelineMax between Tweens, I believe you can use the onComplete method inside your animations. And when you return to state 0, you can use onReverse. Look this: https://greensock.com/docs/TimelineMax But really if you have a Pen, it's easier to find a way to help you.
    1 point
  15. I'm wondering if @OSUblake or @Sahil will be the first to launch: youmightnotneedsvg.com. Or maybe it'll be a joint effort: blakeandsahilsayyouwillgetbetterperformancefromcanvas.com
    1 point
  16. A few comments: filters (especially blur) are very CPU-intensive, so be careful. This has nothing to do with GSAP - it's a browser rendering thing. Various browsers render the same blur value differently. For example, a stdDeviation of 3 is barely blurred in Chrome whereas it's very blurred in Firefox. If you crank it up to 10, you'll notice it in Chrome (and of course it'll be SUUUPER blurry in Firefox). Be very careful about running logic on every scroll event (as in $(window).scroll()) because the browser will fire those VERY frequently during scrolls...like it could be over 100 events in less than a second. That's wasteful because the screen isn't updating any more frequently than 60 times per second in most cases. I'd recommend throttling those. If you look at DevTools, you'll see that GSAP is doing exactly what you're asking it to do (update the stdDeviation value of the blur), but various browsers render the values differently, as mentioned in #2 above. I also believe that some browsers will only render whole values for certain things. So for example, if you animate between 0 and 3, GSAP will appropriately interpolate (with lots of values, like 0.1, 0.1247, etc.) but the browser may only actually render the closest integer value, like 0, 1, 2, and 3. Again, this has nothing to do with GSAP - it's a browser thing. You might want to look into using <canvas> instead of SVG. I'd bet it'll perform better and give you more consistent results (though it's a bit more work). I hope that helps.
    1 point
  17. Hello @tri.truong and Welcome to the GreenSock Forum! I couldn't load your website link in Firefox on Windows 10. But GSAP does have a auto scroll plugin called ScrollToPlugin. https://greensock.com/docs/Plugins/ScrollToPlugin It allows you to do the following To scroll the window to a particular position To scroll to the element with the ID "#someID" To tween the content of a div To scroll when define an x (translateX) or y (translateY) value or both Some codepens of this: And this: There is also the GSAP tweenTo() method tweenTo() : https://greensock.com/docs/TimelineMax/tweenTo() .tweenTo( position:*, vars:Object ) Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops. If your still having issues please create a reduced codepen demo example so we can test your code live. Happy Tweening!
    1 point
  18. GreenShock /ɡrēn ˌSHäk/ noun: GreenShock psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum." synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment
    1 point
  19. Hi deanpien If i understand your question correctly , pls check this out : http://codepen.io/MAW/pen/GgEjrd
    1 point
  20. Hey guys, I actually discovered an easier way to do this using enquire.js Here's an example: enquire.register("screen and (max-width:1023px)", { match: function() { isMobile = true; console.log("is mobile"); }, unmatch: function() { isMobile = false; console.log("is desktop"); } }); if(!isMobile) { //slide in #main TweenMax.fromTo('#main', 1.25, {opacity: 0, transform:"translateX(14%)"}, {opacity: 1, transform:"translateX(0%)", delay:0.5, ease:Expo.easeOut} ); //fadeout overlay TweenMax.fromTo('#overlay', 1, {autoAlpha: 1}, {autoAlpha: 0, delay:0.6} ); } else { //fadeout overlay TweenMax.fromTo('#overlay', 0, {autoAlpha: 1}, {autoAlpha: 0, delay:0} ); }
    1 point
  21. Check out the seek function in the API, it's all explained there. seek(position:*, suppressEvents:Boolean = true) Set the second parameter to false and it will call your functions.
    1 point
×
×
  • Create New...