Jonathan last won the day on January 2

Jonathan had the most liked content!

Jonathan

Moderators
  • Content count

    3,282
  • Joined

  • Last visited

  • Days Won

    121

Jonathan last won the day on January 2

Jonathan had the most liked content!

Community Reputation

4,301 Superhero

2 Followers

About Jonathan

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    United States
  • Interests
    Traditional Animation, Computer Animation, Drawing, DJing, Mycology, and Herbalism

Recent Profile Visitors

19,955 profile views
  1. Chrome bug: Filter blur offset artifact

    @OSUblake Im not ripping against using an onUpdate, I still use it myself and it is very useful. But I've seen recently in the past 2 years or so when interpolating CSS Filters, that Chrome sometimes isnt rendering CSS Filters correctly when it is an onUpdate. Either only doing a partial render or no render at all for either start or ending state. Sometimes the issue being the initial default start values that are not defined in the CSS or via set() method. I've seen that it does work correctly with a fromTo(), since your basically telling GSAP the start and end values to pass to the browser. So onUpdate is still useful, but it is subject to the syntax used in the onUpdate, especially when tweening CSS Filter values. This is also due to CSS syntax changing constantly which has forced me throughout the years to constantly change my CSS syntax used in onUpdate, due to the CSS spec changes. But now I have had to opt for just allowing GSAP to tween the values like any other CSS properties due to the wider browser support of CSS Filters now supported. You know what I mean?
  2. Chrome bug: Filter blur offset artifact

    Hello @latushko.igor and Welcome to the GreenSock forum! When I tested your codepen in latest Chrome I do indeed see the -1px offset flicker artifact you are posting about. Previously we had to use the onUpdate way, due to the lack of browser support of CSS Filters. But since the browser devs are constantly updating there browsers every month, support has increased for CSS Filters. When I apply the effect using a fromTo() tween, without the older way of doing this with an onUpdate, then I no longer see this flicker in Chrome. TweenMax.fromTo(".box", 1, { webkitFilter: 'grayscale(100%) blur(5px)', filter: 'grayscale(100%) blur(5px)' },{ webkitFilter: 'grayscale(0%) blur(0px)', filter: 'grayscale(0%) blur(0px)', immediateRender:false, repeat: -1, yoyo: true }); Try this with the fromTo() tween and see how that works: Also i opt to leave the webkitFilter property included, so older versions of webkit, as well as various webkit and safari on mobile are supported, since I am OCD when it comes to browser compatibility. Happy Tweening! Resources: https://greensock.com/docs/TweenMax/static.fromTo()
  3. Codrop's Slice Revealer like animation using GSAP

    Hello @Oskar and Welcome to the GreenSock Forum! Here is a jQuery Plugin i made awhile back that takes an image, then slices it up, and uses GSAP to animate the sliced elements. In the following examples I slice an image automagically into div elements with the right background position on each slice to make the image look like one image. Then I use a staggerTo() and animate using x (translateX) and or y (translateY) axis with overflow hidden on the container to create that effect for you. It requires GSAP to run animation, its free to use as is. When i have more time i will account for responsive and other types of effects. Has various combination of options: number of tiles in x or y axis (horizontal or vertical tiles) duration stagger delay direction margin for grid wall metro type of look (spaces between each slice for metro grid) Happy Tweening
  4. Is there a way to un-nest (de-parent) timeline?

    Hello @determin1st and Welcome to the GreenSock Forum! To better help see what you are trying to do and how to help you based on the code you have already tried. Can you please create a reduced codepen demo example so we can see your code in context. This way we can help you better to offer solutions: Thanks
  5. Can't click on dev tools!

    Hello @smallio and welcome to the GreenSock Forum! I see 3 things wrong: There is an error in the console due to what is happening in bullet #2: TypeError: document.getElementById(...) is null on line 81 When i inspect the DOM.. it looks like the Dev Tools are being inserted after the ending </body> tag but before the ending </html> ending tag. This will cause your z-index not to be applied and that error in bullet #1 due to the devtools being outside of the <body> tag </body> <style></style> <div class="gs-dev-tools"></div> </html> You have <html> tags out of order in the codpen HTML panel. So the <html> tags should be deleted from the codepen HTML panel. There not needed since the browser will create it for you when using codepen. The devtools should be inserted right before the ending </body> tag. I can see that causing issues as well. This is being caused since your HTML panel has malformed HTML. I will let the GreenSock big wigs know of this issue. Please standby while we look into this for you
  6. GSAP splittext div's auto width

    Hello @niiku23 and Welcome to the GreenSock Forum! Sorry your having this issue! To better help you can you please create a reduced codepen demo example so we can assist you by seeing your code in context. This will allow us to visualize what you are seeing Thanks
  7. GSAP Stagger Reveal on load followed by scroll revealing

    Hello @ekfuhrmann and welcome to the GreenSock forum! I believe @Dipscom was referring to the Intersection Observer API to detect when something is inside the viewport. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Happy Tweening
  8. Text effect with stagger and css filter ?

    Hi @multivac Let us know how the above codepen helps https://codepen.io/jonathan/pen/jYoaxB
  9. Text effect with stagger and css filter ?

    Hello @multivac Is this what you were after? .. i used a staggerFromTo() without using an onUpdate I think the issue was that the browser did not know what the starting filter value was, since by default CSS filter is none. That is why you saw a an abrupt step with no transition from blur to no blur. It was acting like an on / off switch with no interpolation of values. I also added a slight rotation 0.01 and used autoAlpha instead of opacity to make it animate smoother. As well as adding some needed CSS properties to help with cross browser rendering bugs. So now you should see it animate from blur to no blur: JS: var h1 = document.querySelector( "h1" ); var split = new SplitText( h1, { type: "chars" } ); var timeline = new TimelineMax(); // change visibility for initial load TweenMax.set("h1", { visibility:"visible" }); // use satggerFromTo() timeline.staggerFromTo( split.chars, 0.7, { autoAlpha: 0, webKitFilter: "blur(5px)", filter: "blur(5px)", x: 80, rotation: 0.01 },{ autoAlpha: 1, webKitFilter: "blur(0px)", filter: "blur(0px)", x: 0, rotation: 0.01 }, 0.1 ); CSS: h1 { visibility:hidden; } h1 > div { -webkit-backface-visibility:hidden; backface-visibility:hidden; visibility:hidden; } Happy Tweening!
  10. Text effect with stagger and css filter ?

    Hello @multivac and welcome to the GreenSock forum! To get a full cross browser blur effect you should animate using an SVG filter instead of a CSS filter. This is due to the limit of browser support for CSS filters. But it is getting better for CSS Filters support in each passing year. So i have 2 examples.. animates SVG Filter Blur animates CSS Filter Blur The below example uses the GSAP AttrPlugin to animate the stdDeviation attribute of the SVG <feGaussianBlur> element. And here is an example of animating CSS Filter blur() Happy Tweening!
  11. SVG Animations With No JavaScript

    Hello @SteveSargent and welcome to the GreenSock Forum! You can see here that SMIL is not widely supported and has been deprecated in many modern browsers. https://caniuse.com/svg-smil Chrome has it deprecated, but un-suspended it in 2017, but still SMIL was replaced by the web animations API and CSS animations which in itself is still not very compatible or very consistent. And you wont be able to use SMIL in IE or MS EDGE since its not supported. I really don't see you using SMIL unless you want inconsistent animations that wont work cross browser. You could use CSS animations but you wont have the control like you have with GSAP for complex transforms on the fly. But that is just my two cents. Happy Tweening
  12. Hello @mannycode and welcome to the GreenSock Forum! Looks like you were missing the jQuery JS and the TweenMax JS. You can add those by going to the JS panel. Click on the Gear icon and use the dropdown in codepen to add a JS library. This video tut by the mighty @Carl can help on how to add JS GSAP to your codepen: Happy Tweening!
  13. I could not see any flickering either or a line on the side. Pretty cool animations! Tested in Windows 10 in latest Chrome and latest Firefox
  14. infinite cube carousel

    @Lovestoned Yes technically you can use ThrowProps with Draggable. But the way it is setup now the drag only allows it to animate a certain distance. You would need to add the GSAP ThrowPropsPlugin (which is a Club GreenSock Membership plugin). Then you will need to add the GSAP ThrowPropsPlugin JS script and then add throwProps: true to the Draggable.create() parameters. But again you would need to change the functions of next and previous to go past their predefined distance of just moving to the next or prev slide. GreenSock allows you to use the GSAP ThrowPropsPlugin JS on codepen so you can play and test with it. But keep in mind that the GSAP ThrowPropsPlugin will only work on codepen and not outside of it.
  15. infinite cube carousel

    Hello @Lovestoned and welcome to the GreenSock Forum! Just to add to the Mighty @Carl and @Sahil great advice and examples! I made some quick optimizations so when you animate it animates each slide using matrix3d() instead of matrix() for a smoother animation, by adding a slight rotation of 0.01. Since i was seeing some jank (lost frames) on windows 10 latest Firefox when animating left or right. As well as adding the CSS transform-style: preserve-3d on the .slide CSS rule elements for cross browser compatibility and preventing some browser bugs. Happy Tweening!