Carl last won the day on March 5

Carl had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. ModifiersPlugin not working on scale?

    Great note, Craig. Its worth repeating that all the hard work that you and the other moderators and contributors do makes it possible for Jack to improve the codebase. Its amazing that we have such great people around that go above and beyond.
  2. target random DOM elements properly

    nice one craig. I deeply regret my lack of gif
  3. target random DOM elements properly

    I think PointC's version is fantastic and meets all the goals. However, this is a fun challenge so I thought I'd just share an alternate approach that adds a touch more randomness and TWICE as many boxes The idea is that there is a function that animates a thing with random duration, delay, and repeatDelay. When the animation finishes it calls that function again and passes in the same thing and animates it again with totally new and random values.
  4. CSSRulePlugin doesn't work with TimelineMax

    Hi DevSaver, Sorry to hear you are having problems. The site you are linking to is loading literally hundreds of javascript and css files. Please provide a reduced test case that includes just a single tween of a single rule. If you can get a very simple example working then at least we know that a conflict is being caused elsewhere. If the simple example breaks, it will greatly speed up our ability to diagnose the problem. Thanks!
  5. Add Index parameter to Modifiers Plugin function?

    It seems like it could be a useful feature worthy of consideration. Like all things, we have to weigh the file size and performance implications against the demand. As you have shown, there are ways to accomplish what you need already. Thanks for the suggestion.
  6. how to create box slide effect like this

    HI BigTreat, The point of these forums is not to have members build projects on demand, but to show them how to use various features of the GSAP API. The demo Shaun provided should be more than adequate to show how to break up an image and animate different parts. here is another demo from @Rodrigo that uses a full grid. Hit the "remove image" and "restore image" buttons a few times: To build something like revolution slider from scratch with your special requirements just takes too much custom html, css and js. Unfortunately it would be way too time consuming for people to be able to build that properly and try to teach you at the same time. Again, if you have specific questions related to GSAP and a simple demo we can work off, we are more than happy to help. Thanks for understanding.
  7. Animation plays first on website load

    Nice work on the site. Looking good. We really can't investigate a standalone javascript file with 100+ lines of code. However, if you are seeing elements appear on page load before you want to animate them, most often what you can and should do is set their visibility to hidden in the css path { visibility:hidden; } and then in the js when it comes time animate them use TweenLite.set("path", {visibility:"visible"}); It sounds like your page is rendering before the js runs which is typical. So by setting the visibility to hidden via css, they will not be shown on the initial render of the page.
  8. PIXI filters?

    I personally haven't done anything with those filters but hopefully these demos from @OSUblake show a bit of what is possible.
  9. Great job, Craig! Very helpful. This is pretty much my approach and find it better than most. I still find it a bit ridiculous to have to go through so many "file > export as" steps for each revision. It would be much better if there was an option to either have: a window that shows live SVG code as you make changes a single button "show svg code" maybe someday i'll have the patience to submit a request to the illustrator people
  10. ExpoScaleEase Demo - How?

    I had my tesla prototype driving me around today and it was really weird running the demo on the fullscreen HUD. forget about even trying to use the codepen editor while doing this.
  11. ExpoScaleEase Demo - How?

    i've found that if you stare into the center while it zooms out (halfway through) for about 30 seconds to a minute and then look away, your whole world bulges out at you. creepy.
  12. Timeline.addPause doesn't work if no tweens are added

    Hi zadvorksi, Thanks for the clear demo. The demo and thread Sahil referenced are great and should shed some light on how things work. However, if you need more info on the what, why, how, just let us know. In the meantime I'm going to take this opportunity to promote your work to the others as I'm a bit of a fan. Carl
  13. Draw SVG - Circle changes direction

    Ah, yes, mouseenter seems to work fine. Doh. You are exactly right. Mystery solved
  14. Draw SVG - Circle changes direction

    @smallio yes you can force it to complete the full circle and use an onComplete callback but then you have to consider what will happen if they mouseenter againg quickly while the mouseleave animation is playing. Are you going to wait for that to finish as well. I think whatever you want to do is all possible, you just have to see if its worth all the additional complexity. Also, if the animation doesn't appear to respond exactly to user interaction it could give the user the impression things aren't working properly. @PointC Yeah, you're slow version definitely shows how I would expect things to work in all scenarions (cool). But I still think something is amiss, perhaps even a rendering glitch. I recorded my demo above at the current speed but edited the video to play at half speed. When I mouseleave even when the drawSVG value is something like "0% 75%" the stroke appears to shrink down to a hairline fragment and I'm not sure the end of the stroke segment should really go back to being that close to the beginning of the segment. Give it a look here:
  15. Revealing a background

    Thanks for the demo. I don't understand what you mean by leak of the background or "black ground". Kind of confused. Is your question related to something that GSAP isn't doing properly or the layout with your html and css?
  16. Sorry, I'm still pretty lost, but even with my basic understanding it seems you want things to drag and throw while your content is scaling and still maintain some type of snapping. Unfortunately there isn't a built in Draggable function for that. It sounds like you would have to write a fair amount of custom code for Draggable to hook into. Perhaps someone else around here sees it differently.
  17. ScrollToPlugin IE10 incorrect scroll position

    Thanks for the new demo. We will let you know what we find.
  18. Recommended scrolling trigger/detection

    Hi cmm, Thanks for your strong vote of confidence in GreenSock's tools. Whether or not we should do a scrolling tool comes up periodically, but at the moment we're focused on a bunch of other higher priority features for the platform. Building a tool like ScrollMagic would require lots of dev time and an inordinate amount of additional support, so its not something that we can just "knock out" in a few weeks. It would require a substantial commitment of resources long-term. Totally appreciate the suggestion. The more we hear these things the more it moves the needle forward. As smallio suggested, ScrollMagic is pretty much the most robust solution out there with strong documentation and examples. Although I don't use it myself, the majority of fancy scroll sites that are in our showcase use it with great success.
  19. Draw SVG - Circle changes direction

    BTW the "glitch" I was referring to is that if you mouseleave / mouseenter very fast the stroke will become super small very quickly and disappear which I don't think is right. @PointC gets around this by forcing the fromTo values in his mouseleave as well but that forces that tween to start with the stroke fully drawn even if you mouseleave when it was half-drawn. I'm going to have to look into my issue a bit more, as I'm not expecting that result
  20. Draw SVG - Circle changes direction

    Thanks for the simple demo. Very helpful. Good news: I know why it wasn't doing what you want Bad news: I'm seeing a bit of a glitch that I can't explain at the moment. So it wasn't playing the same way after you enter and leave once because the end of the "leave" animation was not the same as the start of the "enter" animation. When you demo loads you set drawSVG:0% When you first mouseenter you are tweening from drawSVG:0 to drawSVG:"100% 0%" When you first mouseleave you tween to drawSVG:"100% 100%" So now the next time you mouseenter you are not starting at drawSVG:0% as you were the first time you are starting at 100% 100% which is much different. The solution is to make sure you mouseenter always starts at 0 and goes to 100 100. you can do that with s.mouseover(function(){ TweenMax.fromTo(c ,0.5, {drawSVG:'0%'}, {drawSVG:'0% 100%', stroke:'#fff', ease:Power1.easeInOut}) }); My demo is below and I'm curious to see what @PointC just posted before me:)
  21. Animating SVG mask content

    Sweet! Thanks, Sahil.
  22. Animating SVG mask content

    Maybe try applying your mask to a group <g> and put your <image> in the <g>. Then animate the position of the image. For cases like this I would search CodePen for awhile and try to find an SVG mask demo that works in IE and then try to animate it with TweenMax. I'm really not up to speed on how all the different versions of IE handle masks and that kind of stuff.
  23. Hi Kakarlus, No need to share your actual project files, just a reduced demo that clearly illustrates the issue. We don't need to see your real images, logos, or anything like that, just a bare-bones prototype. I'm guessing we wouldn't need to see the full carousel either, just a simple Draggable that isn't performing to your expectations. Basically just start with your project and remove all the stuff that isn't related the problem and then replace your images with divs with solid background colors. The CodePen below loads in TweenMax and Draggable. Just "edit on CodePen", fork, and add your own code. In cases like this we really need to see the problem in order to diagnose it properly.
  24. Nice job, Sahil. Very clear description of what the code is doing. Really glad you made this. Looking forward to part 2
  25. Dragable and image clip

    Great demos @Sahil and @PointC