Jump to content
Search Community

Visual-Q last won the day on April 3 2021

Visual-Q had the most liked content!

Visual-Q

Moderators
  • Posts

    503
  • Joined

  • Last visited

  • Days Won

    4

Everything posted by Visual-Q

  1. I like the idea of the functionality plugin in theory. I usually just have a single php file that enques all my scripts at once which seems adequate for my needs. I may look into it further though on my next wp site.
  2. Visual-Q

    Many setTween

    Sorry that'as what I thought you wanted. As @Sahil noted to animate to these positions you have to use GSAPs animation methods.
  3. Visual-Q

    Many setTween

    var tl = new TimelineMax() .set(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_1", {top: "-100px"}); // the tween durtion can be omitted and defaults to 1 var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}) // animate color and top border in relation to scroll position .setTween(tl) .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin) .addTo(controller); I believe you can set timelines as well as tweens so something like this should work. I'm not an expert on Scroll Majic but I believe you were confusing the Scroll Majic '.setTween' method which attaches a tween to a Scroll Majic scene with the GSAP '.set' method which sets a property on an object.
  4. Hmmm... I guess it does pay to read the docs it's right there in black and white. DOH! Probably worth noting empty whitespace is still collapsed like a browser, you have to put in non-breaking spaces (&nbsp's); to make reduceWhiteSpace:false work. Might be worth updating line in docs "By default, it is true which collapses white space characters into one, as most browsers typically do." This seems to suggest empty whitespace is maintained with false. This is a bit misleading, empty whitespace still collapses like in browsers, non-breaking spaces are honored just like in browsers.
  5. If you want a cursor to go over "empty" spaces and honour them as character positions then you could probably use the solution I suggested inserting text for the empty space but making it invisible.
  6. Cool, it's never occurred to me to give an empty span size.
  7. Perhaps you could insert dummy text where the spaces are needed and wrap it in a span with visibility :hidden
  8. One thing you could do is replace the text in the element itself then you would be free to do whatever you want as far as css goes. It's late so I'm not going to try and get into giving an example right now, however... You could animate the change with the text plugin. https://greensock.com/TextPlugin. And here's a link with various techniques for swapping text https://css-tricks.com/swapping-out-text-five-different-ways/
  9. Yeah this was one thing I thought modifiers might be good for back when it was first proposed I just never got round to testing it out till now. I think it's a pretty good option for this kind of thing as long as you don't push it to the point where the added load from using the modifiers degrades the animation performance. I also really like the option from @OSUblake's post referenced at the beginning of this thread that records the animation progress then rebuilds it.
  10. Visual-Q

    #WIP Website

    Regarding the if statements: if all the animations they are executing are the same then you should be able to replace the ifs with just a single selector for the active slide shown at the bottom. That's kind of the point of adding a class like active so it's selectable. tl.set($currentSlide,{autoAlpha: 0,className:'-=active'}) tl.set($nextSlide,{autoAlpha: 1,className:'+=active'}); tl.play(); if($nextSlide.index()==0&&$nextSlide.hasClass('about')){ var aboutH1 = $('.about h1'); slideAnim.to(aboutH1,0.5,{x:300},'-=0.5'); slideAnim.play(); }else if($nextSlide.index()==1&&$nextSlide.hasClass('team')){ var teamH1 = $('.team h1'); slideAnim.to(teamH1,0.5,{x:300},'-=0.5'); slideAnim.play(); }else if($nextSlide.index()==2&&$nextSlide.hasClass('case')){ var caseH1 = $('.case h1'); slideAnim.to(caseH1,0.5,{x:300},'-=0.5'); slideAnim.play(); } // if all the above animations are the same then you should be able to replace the ifs with just a single selector for the active slide slideAnim.to(".active h1",0.5,{x:300},'-=0.5'); slideAnim.play();
  11. One more pen for the concept. I animated the size of the parent container so you can see how it works responsively without having to resize the window.
  12. Here's a second run at this with @OSUblake's invaluable assistance moving the resize calculations into an event handler outside of the modifiers. I realized, dufus that I am, that the original had a whole bunch of extra calculations of the object's size that were unnecessary all you had to do was calculate the parent's size. So here's my revised effort for Responsive Transforms Based on Parent ( in this case the Window). Note I added in the divide by 100 in the function to allow for the tween x and y to treat 100 as 100% percent of the parent/window size. Otherwise 1 would represent 100%. It can certainly be removed to reduce the calculations if you want to work with values of 0-1 instead of 0-100.
  13. That's awesome I was trying to work out how to improve it by limiting the calculations to resizes but didn't get my head wrapped around it. Question what is the tween.ratio value in the modifiers?
  14. Here's an idea I've had rolling around in my head since Zirkels previous post about transforms. It demonstrates 2 concepts I had. First it uses modifiers to adjust transform based animations responsively. Second it animates transforms on an object relative to the window or its parent (rather than the object itself) depending on the parameter passed allowing you to treat them like top left percentage animations, effectively making the parent a stage which I think is really useful. If you open the pen and drag around the window size you'll see it work. Interested to know if people think this is a good solution or if there is a more efficient way to handle this, I don't know how performant it would be with large complex animations but I can certainly put it to work for the more modest UI based stuff I do. Second pen adds function with event handler to maintain responsive transforms after animation ends.
  15. I had a question about referencing the target.object. I was thinking about how I could make some pluggable functions for tweens and was wondering how I would reference the target.object to pass as a parameter to the function without having to reselect it. function myFunction (target) { //do some calculations with target return something } // I could reselect the target object in this case using jQuery TweenLite.to(".myObject", 1, {x: myFunction($(".myObject"))}); // But can I reference it from the tween such as this.target type of thing TweenLite.to(".myObject", 1, {x:myFunction(reference target object)});
  16. Maybe it's time for name change PointSVG?
  17. My GSAP story for the day. I was integrating some found code to add a peek-a-boo menu to a site update, the kind where the menu slides away as you scroll down but slides back in as you scroll up. It used css transitions but since they did what was intended I went with it. After spending awhile getiing it all plugged into Wordpress it worked fine in Safari and Chrome but Firefox was a disaster. Failed to work half the time. When it did work content mysteriously dissapeared huge ArrRRRGH! Now i could have spent ages trying to refactor my html, or css, or try to rewrite the triggering system in javascript or spend two hours investigating firefox bugs on forums... However 5 minutes to swap out css transitions for gsap and it works like a charm. So much for css transitions/animations.
  18. Thanks for all the info guys now I think I finally get invalidate. Could never quite wrap my head around it before. You should reference that video in the docs would help a lot of people out I'm sure.
  19. There's definitely not going to be silver bullet for really complex stuff and I don't think most would be looking for a magic solution for radical aspect changes, realistically you should be designing different solutions for desktop and mobile/portrait. I think it's more about finding some best practices for updating animation to handle reasonable changes in screen sizes. i.e. someone might drag a window from 1400px to 1600px and changes aspect from 16:6 to 16:10 if they make it taller sort of thing. Typical user adjustments to screen size. Do we use invalidate to try and reboot the the values, maybe pass the animation through the modifierPlugin, what techniques have people used?
  20. You didn't I was responding to @kreativzirkel's post.
  21. I agree when a page breaks, it breaks. Saying "oh it wasn't meant to resized, just refresh it and it will look right", won't get you any applause.
  22. I don't care that much how animations behave during an active resize, however, if the animation endpoint isn't responsive then items can end up out of place which is a problem. You can always reset the position at the end of animations if necessary I guess, but a responsive solution from the start is desirable in my opinion. I guess there's no perfect solution since any "live" recalculations of transforms during screen size changes would add it's own overhead and probably negate the performance gains.
×
×
  • Create New...