Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 08/15/2018 in all areas

  1. Just for comparison, here's a version with a heavy contrast and less blur so the effect is much more obvious. Happytweening.
    4 points
  2. Hi @Blake I moved this thread to the GSAP forum since it wasn't banner specific. You'll probably get more eyeballs on it over here. My thought would be to use a fractal noise pattern as a mask over a solid colored square (or whatever shape you need). That is then placed over the top of the image. By masking a solid colored shape you can easily change the color of the glass if you like. Maybe something like this: I used a fractal noise pattern and blurred it quite a bit so the effect is really subtle. This is a thumbnail version of the actual image I used: You could make the effect much more obvious by creating an image with more contrast. You wouldn't actually have to use a fractal noise pattern. A gradient would work fine too, but I think the fractal gives you more options. With a little extra effort you could add some drips and/or water droplets if you like. Hopefully that gives you some ideas. Others may jump in with additional thoughts. Happy tweening.
    4 points
  3. Yeah I tried looking at the JS too, but there's just too much in there. I also don't know if you're using the latest version of DrawSVG. If I understand your question correctly, you should be able to resize the screen while the circle draws and it will look fine.
    3 points
  4. Hi @reflex Welcome to the forum. The problem is you have a massive group transform on line 10: <g transform="translate(-508 -3551.334)"> You'll need to account for that with an x/y offset like this: var motionPath = MorphSVGPlugin.pathDataToBezier( $("#how-i-do-it__graph__path"), { align: "#how-i-do-it__rocket", offsetY: -3551, offsetX: -508 } ); Hopefully that helps. Happy tweening.
    3 points
  5. GSAP seems to be doing exactly what you asked, but I believe you're missing a "px" (unit) in your circle value. //BAD: value: `circle(${window.innerWidth * 1.25} at 50% 50%)` //GOOD: value: `circle(${window.innerWidth * 1.25}px at 50% 50%)` Does that help?
    2 points
  6. In video, Chris mentions he uses Bodymovin to try out animations or prototype them to get approved and then recreates them using GSAP. I usually do what I am asked to do or from comes to my mind. @PointC probably has some process for planning animations.
    2 points
  7. You'll see in the CSS that I'm limiting the width/height to 80%. But even if we change that to 100% it won't fill the screen at all sizes because of the aspect ratio of the image. You could set the SVG preserveAspectRatio="none", but that would distort the image and look pretty funky. Another option would be to center the SVG and crop the edges depending on screen size. Just use a little JS to make your calculations. Another option would be to use CSS masks, but they give me a headache so I avoid them. Another option would be to not place the image inside the SVG. Set the image as the background of the body (or div) and cover it with an SVG that stretches to 100% width/height. To make it work properly, skip the viewBox attribute. Then drop in a 100%/100% rectangle which effectively covers the body (or div). Use a circular mask to cover that rectangle and reveal the background image. Maybe something like this: Hopefully that helps. Happy tweening.
    2 points
  8. Awesome man, you are a lifesaver. Dunno why, Adobe XD generated it with that transform. I will investigate it further.
    2 points
  9. Just so you know, Google updated to GSAP 2.0.1 and the URLs are listed at: The URLs are much more friendly now
    2 points
  10. GSAP is an animation engine that changes values over time. It doesn't do any rendering so the bottleneck is usually the browser. There shouldn't be any issues with GSAP animations on mobile. Are your elements ready when the tweens fire? If you could put together a simplified version of your project that demonstrates the problem, we can most likely point you in the right direction. Happy tweening.
    2 points
  11. Hey @smallio This thread gave me an idea for a new demo so I thought I'd post it for you. I animated the menu icon into the x and also added a little handwriting effect for some fun. Maybe it'll give you some ideas. Happy tweening.
    2 points
  12. I'm not sure what you're trying to do, but here's a quick example of a SVG with an image and a circle clip-path. It's all centered and the toggle will play/reverse the timeline. Hopefully that helps. Happy tweening.
    2 points
  13. I usually just start coding until something looks good. Oddly enough I start almost every project in Adobe Illustrator. Whether it's artwork from a client, stock vectors or my own creation, I like to get it all organized. Making sure everything has a proper ID and group will make any animation work go more smoothly. I try to look at each piece and think whether I'll make it move and if it should be a part of a group that may move as well. I'd rather have extra groups and IDs and not need them instead of a bunch of generic <path> elements. From there I kick out an SVG if it's a web animation or use Overlord for an After Effects project. That process allows me to quickly experiment or show clients a basic overview. I rarely storyboard unless it's a big project with character animation. Happy tweening.
    1 point
  14. It would really help if you could create a reduced test case as suggested by the thread that PointC shared. I couldn't easily find the js you are using for that effect on your live site. Should be pretty easy to drop your circle SVG into a CodePen (or similar) with just the pertinent JS code. That way we focus on the code in question, edit it, and provide a solution for you. Thanks!
    1 point
  15. I'm not sure I follow the question. Do you think you could make a demo for us? Thanks.
    1 point
  16. Ohk there is too much confusion here. You looked at my demo instead of the comment I linked which had Blake's demo. But forget about it, you will need to study that entire demo before making any changes to it. Now focus on your demo only. In your demo you were supposed to trigger those button clicks. And please avoid editing your demo after posting it. Fork your original demo instead. Also keep in mind, if you practice by copy pasting code instead of trying to understand and learn from it, you will make your life really hard.
    1 point
  17. If you just want to swipe and don't want to redo all your work, then you can use trick as in following demo. I am just using Draggable to detect swipe, you can add that on top of your demo. If you want to drag and willing to recreate everything then take a look at demo by @OSUblake in following thread. That's where my second journey with GreenSock started. The demo is responsive and you can use media queries as well, given that all your slides are of same width.
    1 point
  18. Hey @makis2404 With GSAP you can use Draggable's hitTest method to perform the hit test. On codepen under each panel there is option under drop down, called 'tidy'. It makes your code far more readable and neat, give it a try. I see you are having fun with small games etc. I would recommend a book you will enjoy learning from. All examples are for Canvas but you can apply same logic for the HTML elements. https://www.apress.com/in/book/9781430236658 All the examples from book can be found here: http://lamberta.github.io/html5-animation/ Checkout the video by author of original book,
    1 point
  19. Hi @makis2404 Your demo didn't embed properly, but I found it in your profile. The reason that doesn't work is you have each click create a tween that is added to the end of the timeline. The first tween on the timeline is 100 seconds in duration so the y position animation tweens won't happen until that tween ends. You could create a separate timeline for the click handler or you could simply use TweenMax like this: Keep in mind that on the first click the square will move up to y:0 since you're animating the attribute 'y'. I'm assuming you don't want that so I set the variable to 200 instead of 0. That should get you started. Happy tweening.
    1 point
  20. timeScale doesn't change the duration. It scales the time like so... tl.totalDuration() / tl.timeScale() But that's just at one level. If a child timeline has a timeScale of 0.5 and its parent has a timeScale of 0.5, then it's timeScale would be 0.25 0.5 * 0.5 = 0.25
    1 point
  21. You can use endTime method instead. In other cases you might want to calculate the time based on local and global timeScale. https://greensock.com/docs/TweenLite/endTime()
    1 point
×
×
  • Create New...