Jump to content

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


Popular Content

Showing content with the highest reputation on 08/22/2019 in all areas

  1. 3 points
    Well that's the problem. Your CSS transform transitions are conflicting with GSAP JavaScript animations. Get rid of that addClass/removeClass stuff and replace it with GSAP animations, and you should be good. BTW. There is no need to wrap stuff in a css object. TweenLite.to($circle, 0.3, { x: e.clientX, y: e.clientY });
  2. 3 points
    That's what we hope to do here at GSAP - do all the hard parts so that you guys can focus on the fun, exciting, and cool stuff
  3. 2 points
    Hi @Fakebook When you use the special advanced stagger property in the vars it will overrule the normal stagger parameter. Here's a fork of your pen in which you can see I just made the stagger parameter 100, but everything works as expected. You can put null in that spot too so your position parameter is correct. https://codepen.io/PointC/pen/xxKggye Does that help? Happy tweening.
  4. 2 points
    Thanks for pointing out the tree shaking. I can confirm that the same occurs for VueJs - CLI 3. All worked great in development but as soon as I tested in production it would break. I was pulling out my hair for a few hours on this but it turned out to be tree shaking.
  5. 2 points
    Yes, but it's very choppy because it can't animate the in-between values. To animate font weight using font-variation-settings, which can fill in the in-between values, you have to use a compatible font. Here's a good place to find some. https://v-fonts.com
  6. 2 points
    I have the Google Black Card ...
  7. 2 points
    I'm a little confused - do you have what you need now or were you still looking for some help? I thought you were gonna post something of your own that you were trying to add anchors to, but it looks like you just copied one of our codepens that already had anchors showing. If you need some help with something of your own, just let us know and we'd be glad to take a peek. Otherwise if you're all set, even better!
  8. 2 points
    Hello sharik and welcome to the forums, There are a few different ways to do this. I would recommend looking at GSAP's SplitText and our timeline. The core of it is: have an array of words that you want to change out. Make sure the there are <span>s or something surrounding all words that you want to replace (and replace with). After a certain amount of time, fade out the old word, place the new one in the DOM (without being visible), get the width of the new word and adjust accordingly, then fade in and slide down the new word. Then repeat that process as needed. Does that makes sense? Let us know if you run into any issues and we can help with those. Here's some more information about SplitText and TimelineMax. P.S. Are you sure you want to make a direct copy of that group's website? It does not make your company stand out if you are just copying another company completely. I suggest that you change things up a bit more. Maybe include things from other site's designs so that the mix the sites becomes your own.
  9. 2 points
    Hey @sumith, One of my favorite magazines TheNewYorker uses this technique and has kindly provided the code on Github: uturn - detect scrolling behavior with a requestAnimationFrame debounce Happy debounced scrolling ... Mikel
  10. 2 points
    Not without a lot of work. @GreenSock what do you think about adding gestures to the next version of Draggable, to be more like hammer.js? http://hammerjs.github.io/ hammer.js is an awesome library, but it's really not maintained anymore, so GSAP could fill that void.
  11. 2 points
    Try this: https://codepen.io/mm00/pen/qBWRWKY
  12. 2 points
    Here is a codepen where I have removed the parts that are not needed for the anchors: https://codepen.io/knalle/pen/rNBWbRx But it can probably be improved.
  13. 2 points
    And switch it to use x and y like in my demo. I don't use left and top anywhere.
  14. 2 points
    Hey bromel, fun request Welcome back! Using your method, I'd make use of a counter and GSAP's .invalidate() to do this. https://codepen.io/GreenSock/pen/XWrNxgg?editors=0010 The above will be much easier to do in the next version of GSAP! But it likely doesn't look like what you imagined because it's animating from one color directly to the next, which isn't exactly what Blake's pen is doing. To fix this and make it as smooth as Blake's demo it'd be better to use translation instead of directly animating the color stop values. You can do that by doubling the color stops and animating their offsets like so: https://codepen.io/GreenSock/pen/qBWqJxY?editors=0010
  15. 2 points
    Hey dada78, I believe that the main issue is that 'wght' 700 is not a valid value. You'd need to concatenate like so: 'wght ' + 700 However, GSAP doesn't really know how to animate this either as it's a string. I think most people animate variable fonts by using CSS variables. GSAP has a Quick Tip dedicated to animating those: There's also this demo animating a variable font using GSAP: https://codepen.io/osublake/pen/GPqQaB?editors=0010 But you can use font-variation-settings if you'd like to. You could even put it in an onUpdate and animate the fontWeight instead to have fallback support for browsers that don't support variable fonts, like so: https://codepen.io/GreenSock/pen/RwboYOy?editors=0010 Thanks for posting this question - I've been wanting to use GSAP with variable fonts and this was a good start
  16. 1 point
    Silly me. I had a transition node in the CSS for that element that I forgot was there. Perhaps a note to others with this problem, the transition parameters in the CSS will override the GSAP settings.
  17. 1 point
    Hi, I have been working on a scrollTo feature using ScrollToPlugin. It's working all fine on local environment, however after a production build in Angular (7.0.1 to be exact) tween throws famous scrollTo error: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object. This is how I import GSAP modules: import { TweenMax, Power3 } from 'gsap' import 'gsap/ScrollToPlugin' console.log(com.greensock.plugins.ScrollToPlugin.version) // 1.9.1 console.log(com.greensock.TweenMax.version) // 2.0.2 And this is how I tween: TweenMax.to(window, duration, { scrollTo: y, ease: Power3.easeInOut }) buildOptimizer for Angular is set to false. Import from 'gsap/all' neither works in a production build. What am I missing? SOLUTION: Angular client is tree shaking so I had to reference ScrollToPlugin just after the import. Credits to @Rodrigo import { TweenMax, Power3, ScrollToPlugin } from 'gsap/all' const plugins = [ ScrollToPlugin ] Angular: 7.0.1 Gsap: 2.0.2
  18. 1 point
    Yep, that's exactly why I brought it up. If this post hadn't come up, I was still going to ask. Now is the time to make breaking changes.
  19. 1 point
    You can't animate font weight the way you want. This post does a good of explaining why. https://stackoverflow.com/a/16629941/2760155
  20. 1 point
    @ZachSaucier This is Awesome!!! I feel like you have spoiled me 🤗 Many thanks
  21. 1 point
    Hey, These two pens of Jack and Blake . of Jack and of Blake brought me to the following solution - but with a simple polyline: https://codepen.io/mikeK/pen/bGbBXOO
  22. 1 point
    Just switch it to use e.clientX and e.clientY like in Blake's demo https://codepen.io/GreenSock/pen/qBWqJyy?editors=0010 Happy tweening
  23. 1 point
    Heck, you could even keep the text in the SVG itself and not convert it to a path if you wanted to and had the font loaded (especially if you're going to use the same font somewhere else).
  24. 1 point
    Yep, very doable. In addition to Zach's excellent advice I'd offer the possibility of using the SVG clip-path too. Masks differ a bit and are great when you need strokes or gradients to be part of the mask. Here's a quick clip-path option. Maybe it'll give you some ideas. https://codepen.io/PointC/pen/xxKwZqQ Happy tweening and welcome aboard.
  25. 1 point
    Just about anything can be done if you put enough time and effort forth... It's called masking or clip-path and you can see a nice little video about it here: Regards
  26. 1 point
    Hey Doug and welcome to the forums, This is very doable! The first thing you need is the SVG mask (or clip path - I'd recommend a clip path for something like this). You should be able to export a mask like the one you're wanting from a vector editing software like Illustrator (or Inkscape). You could even generate it from a font file (if you have the font on your system, type the "N" using that font, then convert it to a path). Once you have the mask include the SVG with mask in your project and apply the mask to your images (I'd probably position the images with position: absolute). Then you just have to loop the image movement and opacity changes. There are a lot of ways to do this, but GSAP's timelines (like TweenMax.timeline) should make that part easy. Let us know if you have any other questions! We're happy to help, especially if you provide a CodePen of what you're stuck on. Happy tweening.
  27. 1 point
    Hi, I'm not very familiar with how the latest versions of Angular are bundled, so I'll guess that it uses webpack and perhaps you're bundling with a create app type-CLI. If that's the case, the culprit could be tree shaking. Please read this: https://greensock.com/docs/NPMUsage More specifically the tree shaking part (just scroll down a bit) and let us know how it goes. Happy Tweening!!
  28. 1 point
    Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!
  29. 1 point
    Hello @erayner_45092, welcome to the GreenSock Forum! Also keep in mind that since your using position absolute you dont have to set a specific height on your .box if its parent already has a height defined. But at least one parent should have a height defined when any absolute children are used, like @Shaun Gorneau advised. You can just add height:100% on your .box since its out of the flow of the document and will take up the space of its parent. Especially the parent that has position relative which is what that your position absolute element (.box) is relative to. CSS position property : https://developer.mozilla.org/en-US/docs/Web/CSS/position
  30. 1 point
    That's because your .box has a height of 400px. Once you put absolute positioning on it, it's removed from the DOM order and its parent, which has no height, becomes a height of 0. Putting a height on .animation (of 400px) solves that issue.