Jump to content
GreenSock

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

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!

Dipscom

Moderators
  • Posts

    1,508
  • Joined

  • Last visited

  • Days Won

    58

Everything posted by Dipscom

  1. Well done to you and the team. :) That's a nice site there.
  2. I might create a giphy account just to be able to rebuke those gif attacks of yours. The truth is, you are slowly leaving the dark side. You will embrace the truth! You will LEARN AND BE ONE WITH THE UNIVERSE! Renounce the grubby framework. Cleanse yourself. Be with us! :D
  3. Soooooo, Rodrigo's slowly moving away from the grubby framework into the light... Yes? You better watch where you going, else you step on unfamiliar turfs. Yah?
  4. Dipscom

    Slider GSAP

    That might be the case but your project using jQuery does not mean you HAVE to introduce jQuery into a section of code that is already working without it, does it? It would save you a good deal of time if you don't try to convert the demo to use jQuery, just use as is. What do you think?
  5. Dipscom

    Slider GSAP

    What is wrong there is that the original demo does not use jQuery and you are introducing it withoug making the alterations to the code that are required. Before we go any further, why are you introducing jQuery in a demo that does not use it, does not require it? Why not use the code as it is?
  6. Dipscom

    Slider GSAP

    Line 40 of your example pen. //dots.appendChild(newDot); It is still commented out. Do you understand what this line and the surrounding for loop is doing? The dots are already created. They are just not being placed in the DOM. That's what that commented out line is doing. So, you have a perfectly working example of what you trying to achieve. Do you understand all the lines on that demo? I know you might not, I have been in situations where I had to replicate someone else's code and did not understand all that was written. Would you like to go over it?
  7. Dipscom

    callback

    And we shall be here ready to assist.
  8. Dipscom

    Slider GSAP

    Ok... Let's try and work this out together. Do you know whey they are not appearing? It's because of the commented out line bellow. //dots.appendChild(newDot); But even if you do uncomment that line, it does not work. Why? Because 'dots' itself do not exist. Why? Because in the variables definition at the top of you code you have dots = hideMe.find(".dots") But the .find() method from jQuery does not give you a single array of results, it gives you an Object with a property named '0' so, really you want to do either of the following: dots = hideMe.find(".dots")[0]; // Or dots = hideMe.find(".dots")['0']; // However, note that you cannot use the bellow as the key name is a number and will not work dots = hideMe.find(".dots").0; // This will also not work dots = hideMe.find(".dots").'0'; As for the second error, is a bit similar, you are trying to get the ._gsTransoform of an element when one does not exists. You first need to define a GSAP tween on such element before you can access its ._gsTransforms.
  9. Dipscom

    callback

    Still, you don't need to create another variable to use the tweenTo method. Also, not what Carl has said up there, you don't want to keep adding a brand new staggerTo every time you call the animateSkeleton. The firs thing I say you need to do is understand the difference between creating your timeline and controling your timeline. They are separate things, you don't want to be triggering changes to your timeline (well, sometimes you do but, in your case here, I don't think so) when controlling the playhead. So, really, you want to build the animation in one set of functions and control it with a different set. var tl = new TimelineMax(); function createTimeline() { // Sudo code guessing game tl.to({}, 1, {}); // blah tl.staggerTo( images, .1, { opacity: 1, onUpdate: function() { this.target.className = 'played' // Are you aware this is running on every single frame of the animation? }, onComplete: function () { // I'm pretty sure these two lines bellow do not work as in this scope 'this' is the timeline itself this.target.style.opacity = 0; this.target.classList.remove('played'); } }, .035, 0, removeElemWithNoFullOpacity ); } function animateSkeleton() { images.removeClass('played'); TweenMax.to('.image-sequence', 1, {left: '15%'}); tl.tweenTo(1); } function finishSkeletonAnimation() { if(mySwiper.previousIndex < mySwiper.realIndex) { TweenMax.fromTo('.image-sequence', 2, {left: '15%'}, {left: '-30%'}); tl.tweenFromTo(1, 4); } } Now, if what you you want is to control that little section of the total animation that you named 'rotateSkeleton', that will be a bit more convoluted. You'll probably be better off assigning labels to the sections you want to tween to and tween to those sections as needed. Does that help?
  10. Dipscom

    Slider GSAP

    Hi DevSaver, We will always try to help a fellow. There's quite a bit of code to go over here, can you be a bit more specific than that? What exactly are you after here and what is the problem you are facing?
  11. Dipscom

    callback

    Hey Lacika, Could you give us a bit more context? I mean, Looking at this one function is a tad hard as I don't know where that 'tl' is coming from, why you are using a timeline and then, a TweenMax and why you have a timeline already set as a 'tl' but also set as 'rotateSkeleton'. Also, GSAP doesn't really know when/if a setTimeout is fired or not... Could you show us a reduced case of what you are trying to achieve? The bare minimum is enough, because from what I am seeing here, you're mixing up too many things and that's what's causing your issue.
  12. Hi Tom, Welcome to the forums! Do forgive me as I could not resist saying hello.
  13. Ah... Yes... Blocking extensions do play a role. Welcome to the club! Any other questions, open up a new thread. We're all here to help.
  14. Really? Can you point me to one that you see black/broken? I check my stuff against Safari as well as Edge/IE11 and to me, my stuff works. Opera Mini is the one that will really break stuff but that's by their design. It will strip out everything down to the text-only as far as I hear. The bellow is a Pen of mine, I just opened it in Safari on my Mac and all was good. Does it break for you?
  15. Hi Franz, Welcome to the forums! GSAP does support Safari. The homepage of this site is not rife with animation maybe what you want to do is visit a site like CodePen and look around there for pens that use GSAP (search also for Greensock, people tag their pens with either of those labels) in the Safari browser. You'll see how reliably it performs across different browsers. Let us know if you have any specific questions.
  16. Nice one. Maybe you will come up with a way to run your tweens from a function and give parameters based on the container size to help reduce your repetition.
  17. Hey SoupKing, I have a background on the ad industry and have worked on it for several years, not anymore, though so, take what I say with a pinch of salt. When I first read your post I took it as if you had confused the GSAP flavours and had them backwards but on re-reading, you seem to be saying that you can create the same animation from a complex timeline with less code than if using a timeline. Call me skeptic but I cannot imagine a situation. Yes, there are cases where a timeline is overkill, I have seen those. But, if we are talking about a 15 or 30 seconds ad, they they to have a few elements that have to wait until others are done with their show to come into place. The only thing that comes to mind when mulling over your comment is that either whoever created the examples you are talking about did a really, and I do mean REALLY, bad job. Or your brain is wired in a very different way (in no way it being wrong, just different). Do you think you can share an example where the timeline was too convoluted and a bunch of delayed tweens was a better option? I personaly was in the complete oposite to you. I would get ads created using only TweenMax and suddenly I would be asked to make one or another item move faster/slower... Boom, there would go my afternoon having to work out all delays for all the following delayed tweens for all of those units. I also can't see why you would have to change all the relative positioning ("-=") of the elements in a timeline because the client asked you to "loop it". If anything, using TimelineMax would be simply adding "repeat:2" to the Timeline's constructor (Or however many times the animation was to repeat). You got me curious to figure out how you would set your ads. Can you build a simple example? Then, I'd make recreate it myself and we could discuss the merits of each approach. Not in the sense of "let's see who does it better" but in a sense of "here's how I do it, let's get the best of both approaches". Ps: To me, the timeline is a way to group and sequence related tweens.
  18. At first I thought that was indeed a wonky bug but having spent some time looking at it, it kind of makes sense... The catch here is the subtle detail that you setup a label and then immediately added two .to() calls to tween the autoAlpha of the same element overlapping each other. If we write out how long those tweens are and where they overlap, we can see that GSAP has to merge them together (as it's its default behaviour when overwriting competing tweens) KILLS ONE OF DEM DEADED. Done for. Snuffed. Gone to a better place. (see @Carl official state-sponsored GSAP behaviour report in the post bellow). I stand corrected. Think of each dash 10 seconds. [ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ] Total time [ - - - - - | - ] Label ('start', 1) [ - - - - - - - - - - - - - - - > | | | | | | | | | | | < ] Tween ('start+=1.4') [ - - - - - - - - - - - - - - - - - - - - - - > | | | | | | | | | | | < ] Tween ('start+=2.9') If you stop the overlapping of the competing tweens, the issue goes away. I am guessing here when I say, what could be causing this strange behaviour is how GSAP creates the easing curve of the merged competing tweens and because of the lenght of the whole timeline, it causes the very first frame to have an opacity of 0.375 as it would be the very first frame of the resulting merge. Maybe @GreenSock himself will have a chance to look at it and explains what could be going on under the hood.
  19. I've only came across this thread and wanted to chime in: there's no such thing as 'Netlify does not support GSAP'. Netlify is a static asset host, as in static sites, there's nothing there to stop/prevent the use of any scripts. All that is required is for said script to be included. You said you installed GSAP with npm. Maybe when you are compiling the bundle it is not being included. Even so, the CDN option is expected to work as well as you including the GSAP scripts yourself and uploading them to Netlify. Here's a mock I made a while ago that uses GSAP and is hosted in Netlify. It uses Vue, though, but the point is that GSAP is there.
  20. Really nice read, Mikel, thank you.
  21. I have a feeling the eventListener will take care of that for you. It's a balance between being the best tool for one thing and being a tool that does a lot of things. GSAP is more about being the most flexible/efficient tweening engine around at the expense of pre-packaged solutions.
  22. Dipscom

    Follow by mouse

    You can't stop it from happening, true. You can, however, write a blog post explaining why that's not optimal, refer people to it, became a web-celebrity and rake millions from it in a pyramid scheme.
  23. Dipscom

    Follow by mouse

    Let's kick this nest of wasps, then... Why? What is so wrong that elicits such passion from you, Blake? Oh why so much hate in your heart? Shouldn't we all be more loving?
  24. Dipscom

    Follow by mouse

    You should make Oscar blink and move his mouth when he's following the mouse, as if he's trying to eat it, Mikel
  25. Dipscom

    Follow by mouse

    Hey, @wneet, you're doing good. Just in case you had the same gut reaction as I did with Blake's last reponse, he does sound a bit grumpy but he's not. He's super nice and a good teacher, just sometimes his words are a bit too dry. We've all been there (I think) and tried to work with code we don't understand, I certainly do it all the time. Just keep looking at all examples you can find see why they are different and not how old they are. As time passes, the techniques get refined and new ways of doing things are thought of. Happy Tweening!
×