Popular Content

Showing content with the highest reputation since 09/15/2018 in all areas

  1. 7 points
    Thanks for the demo. Its very helpful. Since you are new to the platform this is a great challenge to try to tackle as a beginner, however it appears you are trying to do some optimizations (like creating loops) before really understanding how things work. There are a few errors and things I don't understand that are probably just due to experimenting and lack of experience (which is TOTALLY fine) and I don't want to spend a lot of time picking it apart but some things to note: you shouldn't be assigning multiple tweens to the same tween variable (var tween = TweenMax.to()) you can't put repeats on TweenLite tweens, only TweenMax tweens instead of using animation.add() you should use animation.to() to save a lot of typing (see my example below) Most importantly, when working with timelines its crucial to understand the position parameter. You should be using it instead of delays on each tween in your timeline. Please study this page: https://greensock.com/position-parameter - Once you understand that page you will be well on your way to becoming a timeline master. In cases like this I would strongly suggest working with a very very reduced example (as little HTML and CSS as possible) and writing the code long-form (no loops) so that you get the basic effect you want working correctly, with the right timing BEFORE you try to refactor it and make it shorter. Please take a look at my example. It may not be exactly what you want, but should be a good starting point. Once you get the text hiding and revealing they way you want, then you can try to work with a more complex svg, additional elements and different effects for the wipe.
  2. 7 points
    Nope. .checked is a property of the input. :checked is a pseudo class representing the state of the input, and would be applied based on the value of the property. I'd imagine it would be pretty easy to get past a "I'm not a robot" checkbox in a CAPTCHA if all a spammer needed to do was apply a pseudo class.
  3. 6 points
    You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,
  4. 6 points
    Hm, your SVG doesn't seem to be set up to do this type of thing really well, but here's a fork of your codepen that splits things up into some functions that spit back timelines that you can nest into a master timeline to keep things more organized: I'd strongly recommend reading this article that explains this concept: https://css-tricks.com/writing-smarter-animation-code/ Does that help at all?
  5. 5 points
    Here's some pens that you may find useful. These use a proxy element. These track velocity. I used the VelocityTracker.track() method because reasons, but it's the same thing as the ThrowPropsPlugin.track() method.
  6. 5 points
    Sometimes you have to make sacrifices with animations. Google wrote an article about doing a crossfade blur for better performance. https://developers.google.com/web/updates/2017/10/animated-blur
  7. 5 points
    Keep in mind @emilychews, that under the hood GSAP uses document.querySelectorAll() for the tween target parameter. So this way you just simply put your CSS selector in your tween target. This way you have less code to write tl.from(target, duration, vars); The target can accept a string also to put your CSS selector: tl.from(".page-1", 1, { y: 10, opacity: 0.3 }) Taken from the GSAP from() Docs: https://greensock.com/docs/TweenMax/static.from() target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). Happy Tweening
  8. 5 points
    "t" can be named whatever you want. It represent the progress of the animation, so it can be thought of going from 0% to 100%. From Flubber's docs. var interpolator = flubber.interpolate(triangle, octagon); interpolator(0); // returns an SVG triangle path string interpolator(0.5); // returns something halfway between the triangle and the octagon interpolator(1); // returns an SVG octagon path string So you pass that progress value into flubber, and will figure out where the points on the shape should be.
  9. 5 points
    Are you switching from landscape to portrait (or vice-versa) AFTER the animation? If so, that'd make sense because you're calculating the window.innerWidth/Height initially and that gets baked into the x/y values. Typically if I want to center something, I'd do something like: TweenMax.set(divId, {xPercent:-50, left:"50%", yPercent:-50, top:"50%", position: "absolute"}); Does that help?
  10. 5 points
    Hi @tun712 Welcome to the forum. I wrote a post on CodePen about how to do this with DrawSVG. https://codepen.io/PointC/post/seamless-loop-svg-stroke-animations Hopefully that helps. Happy tweening.
  11. 5 points
    Hi guys, Why not use GSAP for the presentation itself. Here's a little suggestion for an opener. By beamer in 4K whatever on a giant screen!?! OK, Charly is a bit older, sluggish and mumbling. @Dipscom: You may have your own avatar that suits your character. Best regards Mikel
  12. 4 points
    Your animations aren't aware of your draggable. You can use the ModifiersPlugin if want to use the same function.
  13. 4 points
    I like the stretchy animation you did. Reminds me of some stuff from Material Design. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1-3y3zLHPlV3wg-v2CmlB44qg9nLmldet%2F04-elasticity-spectrum.mp4 https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1PONTdRB2Ywa5Meme5pqbV35bRKFrqHLO%2F04-elasticity-basil.mp4 I like this calendar. If you click in the same row or column, then it will stretch to it, otherwise it will fade out and then fade in to where you clicked. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1KL_-_R_BNLknpF2PtR-z7999Yl1d3Zwk%2F04-elasticity.mp4
  14. 4 points
    HI @WiljeOnline Welcome to the forum. Your SVG is centered in that block, but your path is drawn far outside the bounds. I added a simple rectangle to the second SVG to show that it is indeed centered as it should be. To solve the path problem I just added this line: TweenMax.set("#path3", {x:-348, y:-215}); Here's a fork of your pen. Hopefully that helps. Happy tweening and welcome aboard.
  15. 4 points
    Some browsers apply pixel snapping which makes scaling jerky - you can force the browser to avoid the snapping by rotating the image slightly, even like 0.1 degrees. And for the record, the SVG spec doesn't allow 3D, so setting z:0.01 doesn't do anything for you
  16. 4 points
    Hi again @emilychews If you try my above codepen again you should see its working, I guess codepen didn't save my pen correctly. You don't have to rework your code just wrap with if statement checking the length property or ... You can just have an if statement around the target element for your tween. If .page-1 exists that use that, if it doesn not exist then use .box-1 variable. Using ternary operator way: var page1; page1 = (page1.attributes.length === 0) ? document.getElementsByClassName("page-1")[0] : document.getElementsByClassName("box-1")[0]; tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Or using regular if statement block for better readability since ternary operator way is one long line. var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length === 0) { // use .box-1 if .page-1 class does not exist page1 = document.getElementsByClassName("box-1")[0]; } tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Like this: Does that help
  17. 4 points
    I think @Sahil has found a way into the "Blaketrix". He grows more powerful every day. Excellent work! 👍
  18. 4 points
    Hi @emilychews If I understand your question correctly, you could do this: var page1; if(page1){tl.from("#box2", 1, {y:10, opacity: .3}, "start");} Does that help? Happy tweening.
  19. 4 points
    What country? Interesting library. It looks like it works differently than MorphSVG, drawing a bunch of tiny line segments instead of Beziers. You can animate some property on an object from 0 to 1 and fill in the rest.
  20. 4 points
    Absolutely, GSAP supports pretty much every browser. The problem here is that "width" is an attribute for SVG elements in this particular case, not a CSS property, so you simply have to tell it to target the attribute like: attr:{width:0} Here's a fork with the proper code, and I simplified a lot of your other code too: Better?
  21. 4 points
    Well, the Neuropathway Predictive Algorithm certainly explains a lot. Apparently the Rudimentary Phonics Engine from a couple years ago has morphed into something much more intelligent. With this new technology, GSAP will soon become the ultimate power in the universe. Resistance is futile. I thought the other thing this demo needed was more cowbell (Google it if you don't get the reference), but I couldn't figure out how to add that so I added some impact bursts instead. I like the way this turned out. I may tweet it at CodePen tomorrow and see if I can get it picked. Somebody may find it useful and I always enjoy promoting GSAP over there.
  22. 4 points
    What would we do without your sense of humor around here, Craig? By the way, we already anticipated your replies via our Neuropathway Predictive Algorithm (coming in the next major version of GSAP), so I have been enjoying those enhancements you made to the bubble slider a few hours before you actually made them. Nice work! And that other project you'll be releasing in a few months turns out really well, so congrats ahead of time! Your animation skills continue to grow at breakneck speed.
  23. 4 points
    There's a bunch of ways. You can set a break point in the Sources debugger and check the value of anything in memory at that time. Or you can just select your element in the console, and print out its checked status.
  24. 4 points
    okay, the team finished their sweep but didn't find any bugs. They tell me that GreenSock probably has a spy satellite to monitor all the Moderators. They recommended I build an underground bunker for enhanced security. I thought the bubble slider might look neat if it stretched over to the new target rather than just floating over to it. Here's what I added. Please don't melt my brain with your addition(s). I can only handle so much GreenShock on the weekend.
  25. 4 points
    First of all, welcome to the forums @b0dg4n! And thanks for joining Club GreenSock! Sorry to hear about the trouble. It sounds like you're using the wrong files (UMD rather than ES modules). The simplest solution is probably to "npm install gsap --save-dev" for the main/public stuff, and then for the bonus plugins make sure you're using the files in the "bonus-files-for-npm-users" folder of the zip. Those are ES Modules (well, there's also a /umd/ subfolder if you NEED that format). If your build process involves tree shaking, you may also need to reference ThrowPropsPlugin somewhere in your own code just so that Webpack doesn't dump it inadvertently, like: import ThrowPropsPlugin from "../src/gsap-bonus/ThrowPropsPlugin.js"; const plugin = ThrowPropsPlugin; //just to keep tree shaking from dumping it. That assumes you put the bonus files in a src/gsap-bonus/ directory of course (doesn't really matter what you name it...just put whatever path you want there for your particular setup). See https://greensock.com/docs/NPMUsage Does that help? If you're still having trouble, please provide a reduced test case on stackblitz or codepen or something like that so we can see what's going on. Feel free to private message me with details so that you're not posting the actual bonus plugins somewhere public. I'm sure we can help get things squared away for you.
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up