Dipscom last won the day on February 19

Dipscom had the most liked content!

Dipscom

Moderators
  • Content Count

    1,328
  • Joined

  • Last visited

  • Days Won

    45

Dipscom last won the day on February 19

Dipscom had the most liked content!

Community Reputation

2,342 Superhero

7 Followers

About Dipscom

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    London

Recent Profile Visitors

8,028 profile views
  1. Dipscom

    How to use ScrambleText in Vue

    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
  2. Dipscom

    How to use ScrambleText in Vue

    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?
  3. 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?
  4. 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?
  5. 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?
  6. Dipscom

    callback

    And we shall be here ready to assist.
  7. 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.
  8. 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?
  9. 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?
  10. 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.
  11. Dipscom

    developer for banners and websites

    Hi Tom, Welcome to the forums! Do forgive me as I could not resist saying hello.
  12. Dipscom

    How does GSAP with Safari?

    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.
  13. Dipscom

    How does GSAP with Safari?

    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?
  14. Dipscom

    How does GSAP with Safari?

    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.
  15. 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.