Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 07/30/2019 in all areas

  1. If you wanna get fancy you could also use a SVG mask with a gradient resulting in a nice feathered edge. https://codepen.io/PointC/pen/EqmxZV Happy tweening.
    4 points
  2. Hey @Jiri, If you like a lookalike - a fake of a clipPath ... https://codepen.io/mikeK/pen/LwyVdY Happy forking ... Mikel
    3 points
  3. No, clip-path is not a feature that all browsers support (that has nothing to do with GSAP): https://caniuse.com/#feat=css-clip-path
    3 points
  4. Hey @hando, Welcome to the GreenSock Forum. Here two examples https://codepen.io/mikeK/pen/XBJRrr https://codepen.io/mikeK/pen/pqQJyY Happy learning and tweening ... Mikel
    3 points
  5. Hi @refael_b, Try the Intersection Observer - a native way, no libraries! https://codepen.io/mikeK/pen/jgygXL You can find a good tutorial here Best regards Mikel
    3 points
  6. Very peculiar. I made an exact copy on my local computer (running at file:///) and it works just fine... It must have something to do with your resource importing or trying to run the JS before the page is ready but I am not seeing anything wrong in the network or sources... Maybe it'd help to continue stripping out unrelated pieces until the error stops. Or you could try the opposite, building on pieces until you can reproduce the error again.
    2 points
  7. @PointC Who needs SVG for that? https://codepen.io/GreenSock/pen/ZgKbgW
    2 points
  8. Hm, if you're using a build system like that, I assume it'd be best to use the ES module files rather than the minified files. ScrollToPlugin is in the NPM package, FYI. So you should be able to just npm install gsap and then: import ScrollToPlugin from "gsap/ScrollToPlugin.js" const plugins = [ScrollToPlugin]; //just to reference it so that tree shaking doesn't dump it in your build process
    2 points
  9. If you want to make this work with ScrollMagic, here's a quick demo of what I was advising — measure each elements position from the top. Here I've just created a bunch of divs in a grid and looped through to create arrays which act as 'rows' in a master array of targets. I then create a new ScrollMagic scene for each 'row' and use the .staggerTo() method on the targets. Note: This is not responsive. It will only calculate on page load. You'll have to kill and recreate the ScrollMagic scenes on resize, but this should get you started. https://codepen.io/PointC/pen/aeJxJE Happy tweening.
    2 points
  10. Hey hando and welcome to the forums! The key, as seen in mikel's demos, is generally using CSS' overflow: hidden property which you can read more about here. If you need to reveal it in a more fancy way than just a rectangle, it'd require using something like clip-path, either in CSS (which has less browser support) or SVG (more support but still not perfect for older browsers).
    2 points
  11. Looking for a freelancer to assist with animating our website and creating a preloader for us. Send me a message for more information if you are interested
    1 point
  12. Flexbox isn't designed for grids. That's what CSS grid layouts are for. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout You can listen for media queries to change the layout and recreate your animations.
    1 point
  13. I would highly recommend not doing that for any framework (Vue, React, Angular, etc). querySelector/querySelectorAll can be very problematic with components. Using $refs is the correct approach for selecting elements in Vue. No, that's a Vue file, and it is not an actual script tag. That's all the support I can offer as I'm on mobile right now.
    1 point
  14. None of those files shown show anything related to ScrollToPlugin. Can you provide more details about how you're importing it?
    1 point
  15. Thanks so much for the demo! It shows your setup very well. I'd do something like this: https://codepen.io/GreenSock/pen/rXmxqY?editors=0010 The same approach can be used if you need to use a timeline (such as needing to pause/revert the animation or something like that): https://codepen.io/GreenSock/pen/EqmPGL?editors=0010
    1 point
  16. Hey! Thank you for the reply. I made a Codepen for the problem here: codepen.io/daniel-hult/pen/qembjY Hope this helps
    1 point
  17. Thanks for the quick reply. Yes I still use it, as well as, I would guess, most other AIR developers. Guess I'll ask again later, if AIR in fact do grow substantially
    1 point
  18. Hey @sammyg, Here cool solution - if there was not the problem 'quite jittery in Safari'. https://codepen.io/mikeK/pen/VGPdyJ Happy tweening ... Mikel
    1 point
  19. Hey @refael_b, Sure, you can copy the code. But please play a little with the parameter: for example delay: i-i * 0.6 + 0.005 I'm not an expert and can not explain you the specific delay effect or derive an optimal factor. Our math genie has holidays. https://codepen.io/mikeK/pen/ZgePYN Effort makes smart ... Mikel
    1 point
  20. Can you post the minimal example of the live site online somewhere for us to check out?
    1 point
  21. Is the window loaded and DOM ready? Sir @Jonathan has written about this several times. Here's a bit of his wisdom. Does that help?
    1 point
  22. Mikel , thank you so much! I really appreciate your help! I already went and wrote a whole bunch of javascript to wrap and unwrap the items with the "object-row" depending on the screen size. I will take a look again at your solution which I believe could be great!!! While writing the javascript I was thinking how can it be that such a wonderful library as GSAP has no support for such an easy task! I wonder what other coder are using if not GSAP. I also think that GSAP can start support scroll? I mean we all use it with one scrolling library or another, I am seriously amazed! I learned GSAP with almost every example yet when getting into a "real world" project I got stuck. I will get back to you with the final solution if you are interested. And again, thank you so much!
    1 point
  23. Nice input @intouch, thank you. I do believe you only need to transpile if you are importing the E6 modules version. https://nuxtjs.org/guide/plugins/#es6-plugins I've added a note onto the example repo to include the transpile option.
    1 point
  24. Right everybody, I've taken some time to dive in and look for the most distilled way to import GSAP plugins into Nuxt. Bellow is a repository with the bare minimum needed to run GSAP and ANY of its plugins. I have only left Draggable and some commented out ThrowProps to avoid excessive code confusing people but the gist of the thing is the same. The summary: Use the UMD version of GSAP. It really works out of the box if you do so. All of the other errors I have seen people report here seem to stem from the fact that people (myself included) have been using the ES modules version. For my part, @nicoladelazzari , I apologise as I gave you incorrect information. The error you posted the screenshot of was caused by using the ES modules version of GSAP. The example repo: https://github.com/dipscom/nuxt-gsap-plugins
    1 point
  25. I love SVG clip-paths or masks for this type of work. Pretty much the same thing I did in this demo except the text is linked to the timeline progress. Hopefully that helps or at least gives you some ideas. Happy tweening.
    1 point
×