kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!

kreativzirkel

ShockinglyGreen
  • Content count

    148
  • Joined

  • Last visited

  • Days Won

    1

kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!

Community Reputation

37 Newbie

About kreativzirkel

  • Rank
    GSAP broke my jaw

Contact Methods

Profile Information

  • Gender
    Not Telling
  • Location
    Düsseldorf

Recent Profile Visitors

870 profile views
  1. Simulate overscroll rubber-band effect with ScrollMagic

    I explicitly don't want the page to change it's scroll behavior, because I need to play another timeline at a certain scroll position (bottom of the page). In order to communicate visually that something is gonna happen in a few more scroll-pixels, I only want to visually tease as if the scroll would be getting harder. Maybe the live example makes it more clear. At the bottom, where the jump-module gets animated in, we feel like it's too sudden and unexpected, which is why- .. I can just repeat myself :D:D http://dumbo.design/team Please note: this is still more or less a beta; I wanted to show you guys when it's finished and polished.
  2. Off-Topic: Detect swipe-like gestures on trackpads

    Speedy Gonblakez– Insane! I'm excited to go through your links, thank you very much! Nice solution with draggable, unfortunately it has to be without clicking, just scrolling-style. It looks like hammer.js is also focused on clickdrag-related solution :'( EDIT: I also don't see how pointer-events can help me here, since the pointer isn't doing anything when you use the trackpad to perform scroll. Maybe there is a misunderstanding: I need a "swipe-like-detection" on trackpads, where the user scrolls with two fingers like he would normally do. Since I am in an environment where all panels are positioned fixed top left with width and height 100%, there is no actual scrolling happening.
  3. Love the input of this community so much, that I dare to make a completely non-gsap-related thread. Feel free to delete it, if this may be inappropriate. I have to do a lot of "Snap-Scroll-esc" things; meaning: full width & full height panels, that listen to "swipes". Like fullPage.js or OnePage Scroll for instance. Of course, the animations we use are way more sophisticated. So all I need are the gestures for trackpads. I tried to extract them out of the code.. but.. failed horribly. I then found lethargy.js, which is used by smartscroll but can luckily be used independently. When you look at these solutions and use them with a trackpad, you notice that there is a rather heavy timeout until your swipe is recognized again. As you can see in this Demo, you have to use some sort of throttling or debouncing to fire only one event per user-input. This throttle/debounce timeout is part of a tricky split with lethargy's sensitivity (the green line in the demo, as I understand it) – if the line is too low, you need a very long timeout to prevent false positives; if it is too high, you risk getting false negatives. It appears this doesn't pose a problem on touch devices. For these I use Ben Majors jquery.touch-events, which works beautifully. I fiddled with the three lethargy-parameters the best I could, and haven't accomplished robust results under 650ms delays, which is way too high for my taste. All the fancy animations lose in value, when the user doesn't feel in control and is confused / figuring out when he can and cannot interact with the page. Much text for a simple question: How do you guys handle trackpad swipe events; have you found a way to fire multiple "correct events" without timeouts?
  4. ModifiersPlugin not working on scale?

    Well, although I couldn't provide any useful information or help solving anything, I'm glad my whining for more convenience did end up changing something for the better 8) Is there an ETA for the updated ModifiersPlugin?
  5. Add Index parameter to Modifiers Plugin function?

    Like I said; in my particular case I found a work around – No time to test it in depth; but it looks promising This was more of a general question; curiosity paired with the urge to help GSAP evolve. You guys can't see all usecases; so I just asked I still hope it will be implemented though 8)
  6. Animating the playhead of <video> element. Is it possible?

    Oh okay; I was somewhat under the impression, that you suggest to animate a <progress>-element that is linked to a <video>-element. I know that ScrollMagic isn't from GreenSock. Worth a shot though, that maybe one of you guys know why this approch might be far away from smooth on mobile devices.
  7. ModifiersPlugin not working on scale?

    I don't see a convenient way to make a function that serves all 5 cases properly, because the logic per element differs; some more, some less– This constant scrolling between the timeline and the functions is really confusing– you know me by now – I like to stay as close as possible to the timeline I have something like this: var tl = new TimelineMax() .from(".elem1", 1, { scale: 0, xPercent: 100, modifiers: { scaleX: elem1Scale, scaleY: elem1Scale, xPercent: function(value, target) { // some logic return newValue; } } }) .from(".elem2", 1, { scale: 0, xPercent: 100, modifiers: { scaleX: elem2Scale, scaleY: elem2Scale, xPercent: function(value, target) { // some logic return newValue; } } }) .from(".elem3", 1, { scale: 0, xPercent: 100, modifiers: { scaleX: elem3Scale, scaleY: elem3Scale, xPercent: function(value, target) { // some logic return newValue; } } }) .from(".elem4", 1, { scale: 0, xPercent: 100, modifiers: { scaleX: elem4Scale, scaleY: elem4Scale, xPercent: function(value, target) { // some logic return newValue; } } }) .from(".elem5", 1, { scale: 0, xPercent: 100, modifiers: { scaleX: elem5Scale, scaleY: elem5Scale, xPercent: function(value, target) { // some logic return newValue; } } }) var elem1Scale = function(value, target) { // some logic return newValue; } var elem2Scale = function(value, target) { // some logic return newValue; } var elem3Scale = function(value, target) { // some logic return newValue; } var elem4Scale = function(value, target) { // some logic return newValue; } var elem5Scale = function(value, target) { // some logic return newValue; }
  8. TweenMax.to(".lots-of-elements img", 1, { x: 50, modifiers: { x: function(value, target) { // I would like to add some logic depending on the index of the element // just like function-based values can, but there is no paremeter :'( // luckily, in my case, I can do this: var index = $(target).index(); // some logic ... var newVlaue ... return newValue; } }); I would like to add some logic depending on the index of the element, just like functions can do– But modifiers plugin doesn't have a paremter for that :'( You could work around this by finding the index some other way, maybe with jQuery's .index() But that may not always be possible and when you use a something like this, the work around fails: var elements = [ "#element1", ".stage h1", ".slider .slide span" ]; TweenMax.to(elements, 1, { x: 50, modifiers: { x: function(value, target) { // howww to get the index?! } }) Is there a reason that there is no index param? And would that be worth to add? I say yes 8) modifiers: { x: function(value, target, index) { // some logiiic return newValue; } };
  9. Animating the playhead of <video> element. Is it possible?

    I am still confused, Jonathan– I don't see how you can link the <progress>-tag to the <video>-tag Did I miss the demo where one of you guys did this exact technique? For binding the duration of a video to scroll, I use this so far. var $video = $("video"); var video = $video[0]; var scene = undefined; // preparing scene var // I had problems with loadedmetadata event $video.on("canplay", function() { // cancel if scene already exists // (Don't ask me how, but this scene got created multiple times without this cancel) if (typeof scene === "object") return; var duration = video.duration; var tl = TweenMax.to(video, duration, { currentTime: duration, ease: Power0.easeNone }); scene = new ScrollMagic.Scene({ triggerElement: "video", triggerHook: .5, duration: "50%" }) .setTween(tl) .addTo(controller) .addIndicators() }) Bad performance on Android Chrome though.. a few frames, even if I scroll super slowly. What's why I want to go to try the <progress> route–
  10. ModifiersPlugin not working on scale?

    I know, I know, – you guys are veeery protective when it comes to code-size. But this is a plugin, which is optional anyways How much would it cost to add scale and skew to the modifierplugin, and do the scaleX and scaleY thingy internally? I mean, when the code-size protected TweenMax does provide this shortcut, why doesn't ModifiersPlugin? Using it like it works on y is way more convenient. In my case I need to do this on 5 tweens inside a rather complex (at least for me) timeline. Placing five extra functions somewhere else wouldn't be so pretty –
  11. ModifiersPlugin not working on scale?

    Oh, okay– I will suggest to mention things like these in the DOCS– Plugin docs aren't that long, anyway. That behavior is pretty unexpected for low-medium skilled GSAP users; Wouldn't that be the same for rotation? Isn't rotation technically is placeholder for rotationZ? Yet modifier works on rotation alone.
  12. Responsive tweens with function-based values

    This sounds promising; I look into that. How is the impact on performance with this technique? My instinct says it's rather heavy. I need to change a lot of tweens on resize–
  13. ModifiersPlugin not working on scale?

    It's werid, .. whatever I do, I can't get modifier to impact the scale property– The same principle is working on y. The docs state, you can define a "modifier" function for almost any property It would suprise me if scale isn't one of them. And how do I know which are part and which arent? Thanks, Louis PS: Thank you for the demo @Sahil
  14. Simulate overscroll rubber-band effect with ScrollMagic

    Sorry, I don't understand what you're trying to say here. By "triggering animations based on scroll position" you mean .play() and .reverse() at one specific scroll position. And by "animating scroll behavior" you mean faking the overscroll effect, for instance, and NOT tweening a timelines progress over scroll position A to scroll position B? Aaaand I don't see why ScrollMagic would work against it's own logic. I don't animate the element that is specified as the "triggerElement" –
  15. Responsive tweens with function-based values

    The tween I want to "responsivize" / react to resize is part of a big timeline with labels I tween to etc. pp. Wouldn't invalidating completely reset the tl? I need the progress to stay at label xy or maybe even keep playing while resizing? And it is more of a general question when these function-based values update. Because if they don't I don't see the huge advantage here.