Jump to content
GreenSock

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

kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!

kreativzirkel

ShockinglyGreen
  • Posts

    183
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by kreativzirkel

  1. Thank you very much!

     

    My way of scaling seems to work right now and is more convenient to work with, in my opinion. Are there any issues with scaling the context to fit the coordinates of the svg viewbox that I don't see?

     

    Can't wait to show you the final result!

     

    The line draw has been descoped, surprise suprise ;)

     

     

    Thanks again,

     

    kater

  2. Why does saving and restoring make the thing more perform better?! :D

    When focusing on performance, would you still say drawing these svg strokes with canvas is the way to go? Remember: I will need to animate the drawing.

    (And I will switch out the lil mesh-device with a repeater, which lies right behind it :D)

  3. Very interesting! I didn't know canvas is also struggling with drawing multiple circles ...

    So– knowing that I won't need to draw more than 30-40 circles at a time, would you say this should work with actual canvas-arcs?

     

    If I used an image for that, it needs to be quite large, since we obviously want it to look crisp on 27'' retina iMacs. How does that look performance wise?

    And iiif I used an image, how would the color change work? It's important to hit these exact hex values.

     

    –––

     

    but as for the scaling issue, I don't understand how your ball-and-image-example can help me :(

    and in your viewbox codepen (4x4 grid), only scale up and never draw outside of the canvas. 

     

    I'm pretty sure the key advice is in these demos, but I just don't see it :D – the whole "canvas scale in a dom container trying to match the svg coordinate system" is too much for me :(

    • css makes the canvas html element stretch to fit it's container 
    • then I need to tell canvas in JS to match the elements size (or larger for higher resolutions)
    • then the canvas is 

    Writing it down like this .. I'm wondering why the circles position correctly in my example... because in my pen the scaleFactor doesn't take the ratio into account, only the relation between the svgViewbox.width and the canvas.width– Hah! The ratio is already applied to the canvas.width, which makes it influence the scale aswell. Learning as I'm writing! Bam!

     

    Hmm, maybe it's better to not scale the canvas, but recalculate the x, y, and radius values on draw. It felt more convenient to just draw using values relative to the svg viewbox and scale the whole thing. It's tedious to recalculate all values for new elements. Would all these calculations impact performance negatively?  

     

    -> Just tried the recalculation of values.. this would require to scale the clipping-path aswell.

     

    So I fixed the clearRect issue with "reversing the scale" when clearing, like so: `c.clearRect(0, 0, canvas.width / scaleFactor, canvas.height / scaleFactor)`

    See the Pen vwMdEx by katerlouis (@katerlouis) on CodePen

     

    This still feels like a workaround, though ... 

     

    Could you fork my pen and add what you meant with your demos?

     

     

     

    Thanks!

  4. I need to recreate this animation devices feeling the need to go to the moon (fans go crazy..) https://www.telekom.de/zuhause/heimvernetzung/mesh-technologie (disclaimer, I have nothing to do with the version you see there :D)

     

    Canvas should be way more performant, right? And I've always wanted to dive into canvas! Perfect opportunity

    How hard could it be? Place an inline SVG. Put the canvas below, and animate some growing circles. 

     

    Well.. turns out there are quite some challanges, and I don't wanna bother you with all of them.

     

    Biggest problem so far is this:

    I need/want to place the circles with the same coordinates as in my delivered SVG, and of course it needs to be crisp on higher resolution screens, aaaand of couuurse has to handle viewport resizes properly. 

    I ended scaling the entire canvas-context and was pretty happy with the result .. until I drew more than one frame and saw this.

     

    image.png.0f341627bbf6357f438a9e68adb0a74a.png

     

    What happens is: I clear the entire canvas with `c.clearRect(0, 0, canvas.width, canvas.height)` – but because the context is scaled down, the circle would start at another position and extends beyond the canvas' boundaries. This means the circle doesn't get cleared completely, which makes a part of remain visible. 

     

    Now I could just do `c.clearRect(0, 0, 99999, 99999)` or go `canvas.width * 100` .. but .. I'd like to find a clean solution for this issue.

     

     

    So my actual question is:

    How do I properly match a canvas with an overlaying svg coordinate system?

     

    Another question is:

    How would you guys get the best performance out of this?

    (Because an inline svg overlaying the canvas performs noticably worse than an overlaying img tag referencing the svg file .. which I can't have, because I will need to animate the lines with DrawSVG)

     

     

    I'm thrilled to hear your thoughts on that.

     

    Thanks!

     

     

    See the Pen JqVGWQ by katerlouis (@katerlouis) on CodePen

  5. I guess I‘ve seen this effect somewhere else already, but got reminded now that I saw it on the homepage after the WWDC 2019

     

    so if you go to www.apple.com right now and play around with the scroll, you‘ll notice that the animations don‘t stop when you hardly interrupt the scroll. It feels like the velocity you created with your scroll is not lost. 

     

    Another thing I noticed (or atleast imagine..) that the animation can get only so fast, which is amazing when you scroll like a mad man to the top. Thats not uncommon with such long pages these days.

     

    A library like scrollmagic only lets you couple a tween tightly to the scroll position or trigger it at a certain point. But the dynamic playhead behavior on the apple page is awesome! 

     

    I fear there are already threads talking about that, and I‘m just too dumb to find them..

    but anyhow: how would you approach that?

     

     

    Thanks!

     

    Louis

  6. Damn– deadline is pushing so hard, that this feature has been pushed to the next round.

    I'll can't wait to look into the lerp and mathematic coding stuff, thank you very much guys. 

     

    Thanks for the pens; I'll look into this again when I get some air to breath–

     

    (looking forward to show you what we've done this time 8))

     

     

    Grüße aus Köln diesmal ;)

     

    René

  7. The image and code pen illustrates best what I need to achieve.

    Of course my designers want to animate the reveal with a parallax effect.

     

    I had one approach using scale and xPercent, but failed horribly :D

    Then I tried transformPerspective and actual z-translation, which worked pretty nice. The further the elements get away, the factor in which they get smaller increases and feels natural. Spreading the elements in one direction worked aswell. 

     

    But my solution has the following problems:

    – it is not responsive; using x and y results in only one viewport width where the distance between the elements is perfect

    – visually the whole construct should feel centered, which probably will be the case when the first and last element have similar padding to the outside

    – the amount of elements that spread on in that range need to be flexible aswell (in my case 2-6 elements, but once a system is found it probably will be able to do more elements)

     

    I guess with some more math and optics knowledge this is rather easy, .. but I'm really struggling to get this right.

     

    Any ideas, fellas? :)

     

    Thank you guys!

     

     

    Greetings,

    René 

    ❤️

     

     

    PS: the max size of 32kb is quite inconvenient; :F

    gsap.jpg

    See the Pen wEvgGP by katerlouis (@katerlouis) on CodePen

  8. http://svgator.com

    Unfortunately this tool produces CSS animations (eeewh, I know!), but looks promising in terms of user experience.

     

    Since this thread aged 6 more months I'd like to ask the Elders again, if there are any plans or considerations to either collaborating with existing GUI editors to produce GSAP timelines or maybe even make your very own one? 

  9. Heyho guys, 

     

    long time no read..

    A seemingly never-ending hell-spiral of React, ES6, JSX, Webpack, and Wordpress new Gutenberg-editor are driving me insane... hate have neither time nor mental capacity to contribute here :(

     

    Anyways! My designers came up with "this mega crazy awesome new tool, you just have to check out, yoh!"

    http://svgator.com

     

    It's a GUI producing svg animations. Looks quite promising; but unfortunately spits out filthy css animations (maybe they are good for css animations, but.. you know.. still css :D) 

     

    It got me thinking:

     

    – Is there a GUI which produces GSAP timelines?

    (since I'm quite sure there isn't) Why isn't there?

    – Have you guys considered making your own?

    – Or maybe collaborate with existing tools like svgator? 

     

    René :)

  10. I am also interested in accessing a repeat-counter. Surely GSAP has to keep track and using one under the hood, right?

     

    My use case:

     

    var tween = TweenMax({}, 1, { repeat: 10 })
    	.eventCallback("onRepeat", function() {
          
          	// how can I access the repeat count of the tween?
          	var repeatCount = ???
          
        	if (repeatCount < 5)
              // do this
              
            else 
              // do that
              
           	inBothCases("doThis");
        });

     

  11. Sorry if I wasn't clear enough:

     

    TweenLite.ticker.fps(15) would set the FPS of ALL tweens to 15, right? 

    But I wanna try out to set it lower solely on these 3 animations.

     

    Or could I do something like this:

     

    // my normal animations
    var tween = TweenMax.to(".foo", ...)
    var tl = new TimelineMax() ...
                            
    // set fps only for the next animations 
    TweenMax.ticker.fps(15) // or does this function affect the tweens above aswell?
    
    var slowerTl = new TimelineMax()...
    var anotherSlowTl = new TimleineMax()
    
    // how to reset it?
    TweenMax.ticker.fps(60);
    
    // Other normal animations
    var tween = TweenMax.to(".bar", ...)
    var tl = new TimelineMax() ...

     

     

    I better don't go that route if fps affects ALL my tweens

  12. 12 hours ago, GreenSock said:

    You can tell GSAP to cap the FPS at whatever you want, whenever you want. 

     

    
    TweenLite.ticker.fps(15); //caps at 15fps

     

     

    I suppose you can't set ticker.fps() only for a few tweens, and let the rest play it the normal FPS?

  13. Thank you very much, Jack!

    In your statement you are mainly talking about the 3 hefty chpater intros with the mockups, I suppose?

     

    1) Could performance alone cause the glitchy problem, which is still present in some places, the second chapter intro with the iPhone mockup, for instance?

     

    2) Would it be possible to tell GSAP to lower the ticks for these three animations? Less fps would be better than this mess..

     

    3) How comes Chrome and Firefox make it work so smoothly? Are there any known "Don't Do"s with animations in Safari? Maybe some css property which is known to f*** things up?

     

    4) How would force3D effect performance in this situation? So far the 3 mockups get matrix() and not matrix3d()

  14. I found something!

     

    * {
      -webkit-backface-visibility: hidden;
    }

     

    seems to eliminate atleast most glitches, but not all?

    The page still lags horrendously. Again, only the /airberlin page is affected...

     

    Can you confirm this on the updated version? 

    I've tested multiple apple devices, and all have still the glitches to some degree...

  15. Thanks for your help!

     

    I do $(document).ready() before the whole thing starts.

    And the glitch seems to occur with normal text and background colors aswell. 

     

    The setup for all pages is the same, so if you would be right about that, I guess the other pages would have the same issue, which they don't :'(

  16. 1 hour ago, Carl said:

    You can't have a complex animation with precise layout in a 16:9 aspect ratio and then expect some magic to happen when you go to 9:16 (landscape to portrait) to have it all work seamlessly.

     

    I don't expect one tween it to adapt like magic. 

    Defining multiple animations per breakpoint is exactly what I want, but all the code surrounding that is really expensive.

    That's why I am looking for an API.

     

    But I understand that you guys have other things with higher priority at the time. 

     

    That being said, I'd like to hear more about that and how others deal with these problems.

     

     

    What I've come up with to tackle this is tweening css vars like `--progress` and let the css handle different layouts reacting to this `var(--progress)`

    But this approach gets you only so far.

  17. Sorry to bother you with this. If you find this inappropriate, please forgive me and just delete the topic.

    I can't imagine the issue is related to GSAP.. but I can't imagine what else could cause this weird bug.

     

    What am I talking about?

    Please visit http://dumbo.design/airberlin in Safari – You'll see what I mean...

     

    Issue occurs on the "work page"; the content isn't fully rendered... it looks super glitchy. 

    When you highlight the page by marking text or pressing CMD+A everything in the viewport gets rendert correctly immediately.

    Scroll a bit further and the same issue applies to the rest.

     

    Does anyone have ever faced such an issue?

    I'm really grasping for straws here, guys: I'd appreciate the slightest idea on what could cause this.

     

     

    Thank you very much,

     

    René 

  18. This discussion started in another thread and definitely deserves one for itself; you better read the last 4-5 posts in this thread:

     

     

    TL;DR:

    Complex animations with attention to detail would basically need to be recalculated completely, when the browser gets resized.

    Not only does the layout jump and px values must be recalculated, but as the distances on the screen change, durations, timings, offsets need to change aswell in order to create a similar affect than before. Certain html-elements may drop entirely on new breakpoints and therefore don't need to be tweened, leaving a timing hole in the chain.

     

    This is not an easy task and complicates things quite a lot (for me atleast–) 

     

    Blake made a pen with a possible setup for recalculations on resize:

     

    See the Pen jLLqbY by osublake (@osublake) on CodePen

     

    Doing this work for 50+ animations screams "have fun maintaining this code" to me. 

     

    A few questions:

     

    1) Could you walk us briefly through the code, Blake? I can't quite follow the forEach loop through the media queries, and especially not the code in "onMediaChange()"

     

    2) I treat most of my modules individually, meaning each module gets it's own breakpoints for what the situation demands. Basically "Code the first layout-step, resize the browser and look how long this works out nicely" – if that means we have 3 media-queries in the range of 1280 down to 1050, so be it.

    Is there any way GSAP / JS in general could react to the breakpoints declared in CSS or do I simply have to hardcode those same breakpoints in JS?

     

    You know what I'm about to ask, don'tya? :F

    3) Is there any way to stuff the things Blake did there into a neat lil box, and let the developer access it like this for instance:

     

    var responsiveTween = TweenMax.responsive({
    	"(max-width: 601px)": TweenMax.to(...),
      	"(max-width: 801px)": TweenMax.to(...),
      	"(max-width: 1024px) AND (min-aspect-ratio: 16/9)": TweenMax.staggerFromTo(...),
    	"fallback": TweenMax.to(...)
    })

     

    Okay, .. while writing the code I realized this is not a pretty solution. But you see what I'm aiming at, right?

    A solution that doesn't require you to write helper functions yourself and fits nicely in the GSAP workflow / ecosystem.

     

    Let's get crazy for a moment: How about debouncing the resize event and then animate between these the two breakpoints to make a seamless transformation? I feel this would be insanely complicated and only work flawlessly in very few situations, so maybe forget about that ^^

    • Like 1
  19. 12 hours ago, OSUblake said:

    That only makes your animation responsive in size. Animations have a time component, and speed = distance / time, so an animation will move much slower on a phone than it does on a desktop. 

     

    This is exactly what I'm referring to. 

     

    12 hours ago, OSUblake said:

    Guess what? People don't resize their screens to test out the responsiveness of a site.

     

    But they rotate their handheld devices:

    You are on the toilet, checking this fresh new site on your iPad, in portrait mode, of course– And you think: "Wow, how cool is this site? Gotta show that to Erica!"

    After the important business is concluded, you pinch the iPad under your armpit like a pro and wash your hands. Boom! The accelerometer tells Safari to go Landscape mode => resize!

    Sheer excitement over these astonishing animations make you run to Ericas desk, swinging and shaking the tablet extensively. You stuff the device in Ericas face, who couldn't hold back a little scream of amazement. She grabs it like a fresh Pizza and rotates it to Landscape mode, because.. well, she's Erica. After she fainted and fell to the floor, you quickly pick up the device, looking for damage. Phew! Nothing happened. You step over Erica to get back at your desk, put the tablet in it's stand (in Landscape, of course) and go into split-view to write a mass-text and -email to everybody you did, do and will ever know, about the website that changed your life and finally brought peace to the world–

     

     

    Okay, okay– I overexaggerated a tiny bit. But just watch how people use their tablets these days. Especially those people who use it as their main device.

    We can't escape it. Websites get resized in reality. The likelihood increases on these hip new things called "one-pager", or, like in my case, on single page applications; or just on pages you stick around for quite some time. "Man, this article is looong, I read on later.."

     

    And this is just tablets, there are so many real life occasions where open websites get resized;

    – most smartphone browsers show / hide / shrink their UI on scroll

    – unplug the big monitor from the laptop, Chrome goes from 1920 to 1440 width

    – cool photos on a page, you want to drag them into a folder, you resize to make room

    – browser into or out of fullscreen mode

    – new Safari window, you CMD-Click a bunch of links > the tab row comes in

     

    You see why I phrased "get resized" – Even if users rarely resize the browser in terms of actively dragging the corners, usage alone may result in resize.

     

    Especially on a show-case site like my example, you probably have only one shot to impress the user. I really don't want to know how much exactly the impression changes when he/she feels the need to refresh the page in order to get a "pristine animation" –

     

    "Look at this! .. Oh wait– I don't know why it did that, .. strange, it worked a few minutes ago;" – you impressed somebody so much that he felt the need to share his excitement. Then you make him look like a fool, which makes you the biggest fool of all.

     

    Everytime I witness this scenario on one of my sites, a little part of me dies.

    And I deeply hope the day I stop trying to avoid this is beyond my 70th birthday.

     

     

    (I should stop chillin in these forums while commuting :FF)

×