Jump to content

Visual-Q last won the day on March 16

Visual-Q had the most liked content!

Visual-Q

Moderators
  • Content Count

    303
  • Joined

  • Last visited

  • Days Won

    1

Visual-Q last won the day on March 16

Visual-Q had the most liked content!

Community Reputation

479 Leader

About Visual-Q

  • Rank
    Advanced Member

Recent Profile Visitors

1,602 profile views
  1. You might want to start a new post for this as it attached to a very old one. As far as the issue goes it suggests that something is causing the text to change and reflow after document ready which I presume is what you mean by ready. It's generally better to setup animation after window.onload that way all elements should be loaded, also make sure that the splittext script runs after any other scripts that may affect the text or any containers it might be in. Without a working example it's kind of impossible to diagnose further.
  2. It seems a reasonably efficient implementation for scrollMagic as long as you're using only full height panels. It really hinges on scrollMagic performing reliably across devices and browsers, that you'll have to test.
  3. Unfortunately I haven't used IntersectionObserver before and I can't read ES6 worth a crap otherwise I'd try and jump in. MDN looks like it has a pretty good walkthrough for setting them up: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  4. While it doesn't fix it I think it should be new IntersectionObserver you had Obserber
  5. You need to add the gsap scrollTo plugin https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/ScrollToPlugin.min.js and while it's not necessary in this case as you're calling gsap in callback function you might want to add scrollMagic gsap plugin if you ever want use setTween anywhere https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js Seems to work now. https://codepen.io/Visual-Q/pen/YbQqvN
  6. I guess i'm a glutton for punishment and I couldn't help playing with this. I found that pins really threw a wrench in things as far as trying to setup triggers for panel scrolling so I separated that part into a separate wheel event. I'm sure there's a way to make it work all in scrollMagic but I"M NOT FIGURING IT OUT!😫 I did figure out what i thought was one kind of cool thing - using a flag variable and onComplete to make the wheel event/Tween self throttling. https://codepen.io/Visual-Q/pen/eaWeLv
  7. For alignment issue try setting the width of .section,footer to 100% not 100vw. Counter to all logic browsers include scroll bars in vw calculation, which really sucks. Someone may choose to come in to help here but this really is mainly a scrollMagic issue so it may be best to take it to their forum. Our aim here is to focus on gsap issues.
  8. Looking at the plugin's promo page it looks like they've made a GUI for setting everything up it but it doesn't appear to offer any information about adding your own code. I would suggest you ask the author of the plugin.
  9. var div = document.getElementById("square"); var frame_1_in = new TimelineMax() if(div){frame_1_in .from(div, 10, {x:"+250",ease: 'Power2.easeOut'}, 0.5) .fromTo(div, 2, {autoAlpha: 0},{autoAlpha: 0.2},"-=10"); }; div.addEventListener("click", function(){ frame_1_in.restart(); }) You should probably just put the autoAlpha on a second separate tween that runs for 2 sec.
  10. As long as the variable holding the timeline is a global or at least is scopable to scrollMagic it's values can be defined/redefined in the media function and it should be accessible to scrollMagic's methods.
  11. I am appropriately prostrated awaiting wisdom.
  12. I have a followup question for this: Pedros more elegant solution sets the timeline once and clears it to add new methods. Mine just writes a new timeline on the variable. Is there any difference between the two as far as garbage collection goes, i.e. if you just overwrite the timeline on the variable is the original timeline and it's children wiped out or are they still kicking around hogging resources? // Define timeline once and clear timeline each time var timeline = new TimelineMax(); //set timeline properties timeline.addMethods //reset timeline properties timeline .clear() .addNewMethods // Define New timeline each time //set timeline properties section1MTl = new TimelineMax() .addMethods //reset timeline properties section1MTl = new TimelineMax() .addMethods
  13. I was playing with this and came up with almost the same solution as @Dipscom though mine just overwrites the timelines instead of clearing them. The main takeaway from both examples is I think get the scroll magic scenes out of the mediaQuery function and only define them once, only the properties of the timelines need to be redefined on resize. You can also put all the timelines in a single media function in this case. https://codepen.io/Visual-Q/pen/OYWXjV
  14. You could use an onComplete callback on the timelines with a console log telling you timeline 1 ran, timeline 2 ran etc... this could tell you if the expected timeline is running or not.
  15. The what of it is that visibility hidden is remaining on the objects, so I am guessing it's getting stuck on autoAlpha0. I haven't investigated far enough to figure out the why. I don't have the time right now to figure out how this is all supposed to work but here's a shot in the dark you are defining scrollMagic scenes in each media query fired function. Once these scenes are defined however I think they run on their own which means they may be confilcting with one another.