Jump to content

Visual-Q last won the day on April 3 2021

Visual-Q had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Visual-Q

  1. Visual-Q


    Back in the day Chrysto had a solution I've adapted for things like this. If you search the forum you may also find more contemporary answers. There's even a tutorial explaining it: http://bassta.bg/2013/05/simple-fade-infade-out-slideshow-with-tweenlite/
  2. I was observing various similar behaviours manaully changing window height in the browser on desktop as akapowl noted. Mario will jump out of position too in gsap demo sometimes right out of the container with manual resizes though he snaps back in place on next scroll.
  3. I did a bit of digging divi scroll animations appear to control css animations, they do not inline styles like gsap. So to answer one question they don't use gsap. If you examine some of the animations on the page from divi with the inspector, it appears a body data element linked to scroll position is controlling the progress of css animations. I don't see this occurring on the elements on your page. The data scroller is present on the body on your page but the animation css does not appear to be attached to the element you want to animate. https://www.divithemeexamples.com/add-motion-scroll-effects-to-divi/#:~:text=Divi Scroll Effects are a,up and down the page. Example: the third d that rotates on scroll this is the controlling css: body[data-scroll-step="23"] .et_pb_image_2 { transform: translateX(-8px) rotate3d(0,0,1,15.131deg); //scrolling actually changes these values based on a data item added to the body transition: transform 200ms linear;} Now that we know what divi does it may point you in the right direction.
  4. Might be worth turning off the gsap on the element and verifying that the divi animation is working ok and examine exactly what it does. Assuming you mean the red and white building you can see gsap applying the transform (translate...) if you have another framework applying transform(rotate) inline would gsap overwrite the entire transform. i.e. erase the the rotation? Possible you might also get around a conflict applying gsap and divi animations to separate elements i.e. one on a parent the other on a child.
  5. As a bit of general advice if possible you might want to host your videos somewhere like youtube, vimeo etc. Then they can stream and don't need to be preloaded, and you use their bandwidth not your hosting server's.
  6. Glad it's working for you, note you shouldn't have to do both. Either hardwire them directly on the page or enqueue them otherwise you may be loading them twice.
  7. I can see the scroll bars on a mac on chrome. It looks like the pin spacer is calculating it's width to include the vertical scroll bars and it does seem to be linked to display:flex on the .home element. Though it doesn't seem limited to Windows. You can see this if you set css for .pin-spacer {width:100% !important;max-width: 100% !important} to override the supplied values by gsap. body{overflow-x:hidden} should work as a catchall to hide the horizontal bars but it does look like a bug that may be worth investigating
  8. I'm not sure that you can hook two functions in an action in that way. I believe you may have to hook the functions separately for wp_enqueue_scripts add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' ); add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); or put all your enqueus in a single function https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/ https://developer.wordpress.org/reference/functions/add_action/ https://developer.wordpress.org/plugins/hooks/actions/
  9. Okay I think I get what you mean and maybe what is behaving badly. Did you mean that the pinned element ends up extending past it's parent. i.e into the next panel. I thinks what happening is the start and end of the scrollTrigger happen when the parent hits the top and bottom of the viewport. However the pinned child is larger than the viewport and therefore you have caused it to be offset(overflow) past the bottom dimensions of it's parent when ScrollTrigger ends. Thus the image extends past the end marker which is actually the bottom of the scrollwrapper parent. Set #scroll-wrapper{overflow:hidden} and you'll see what I mean, the image is no longer visible past the end marker. Addendum: And as Zach pointed out, if you've set an element to have a minumum height greater than the viewport, then it will not all fit in the viewport. ScrollTrigger won't change that.
  10. Here's a stab in the dark... usually after I try this Jack comes along and tells us what's really happening. I haven't had much time to look at ScrollTrigger yet but it looks to me that the position of the animating object is being set relative to the screen height with getYposition() while the scrollTrigger is set to an element in a specific offset position in the DOM. This is fine to start with as they maintain the same relative positions to one another if the screen remains the same, but their relative positions change when the screen height changes. I guess it could also go out of position on screen width change as well, as the offset position of the Trigger end target could change with reflow. Assuming I'm right you might want to trigger a rebuild of the animations on screen resize, assuming there's not something already built into scrolltrigger to help with this.
  11. Though it affects the whole page so it's not always desirable, you can also put a global reset on the body, to prevent horizontal scrolling. body { overflow-x: hidden; }
  12. Hi Jane, Advising on complete project implementation is beyond the scope of this forum. We are generally focused on specific GSAP questions and issues. As Zach noted if you are looking to hire someone you can post on the Jobs forum and if possible please look at creating a codepen for us to assist with. However... if you're looking for advice on how to achieve the sections scrolling in the form like https://www.tekrevol.com/app-cost-calculator See the documentation on the ScrollToPlugin and you also may want to look at ScrollTrigger for other scroll based interactions you can create. https://greensock.com/docs/v3/Plugins/ScrollToPlugin https://codepen.io/GreenSock/pen/LkOrKY
  13. I don't see the flashing however: I looked at the image assets you were using all the images appear to be the same size at 2540 * 1319 yet the active image area for each generally takes up only a small part of the image frame with a huge area of transparency. With 11 images layered over top of one another the browser is calculating an enormous number of transparent pixels unnecessarily for render. While I get how this makes it easier to create and lay-out the assets if the images were cropped to surround only the active image area the browser would likely have a greatly reduced workload rendering this. More work getting everything positioned just so but it might pay off performance wise.
  14. Was this what you were after, with once to false. Not sure what you meant by only want it to fade in once. What did you want it to do on reverse if not fade in. Having once true does prevent it from fading in again on reverse so I don't understand the issue. At least there's a code pen now so we can followup on this better. https://codepen.io/Visual-Q/pen/BaKBozJ
  15. The animation appears to work for me in IE11 check your console for errors. And make sure you're not running in compatability mode. https://stackoverflow.com/questions/25077612/jquery-not-working-with-ie-11 That's all I got.
  16. Uh oh, the GSAP Moderators have spit into two opposing IE11 factions, led by Blake and Jonathan respectively. Civil war will soon follow?
  17. Unfortunately I know nothing about react so I haven't even tried to work out what you intend with the useEffect function but this is a basic implementation of using paused:true on timeline and play and reverse in event handlers. Hopefully it will get you moving in the right direction. https://codepen.io/Visual-Q/pen/QeLXVj?editors=1010
  18. If you want to pass parameters with function you should probably use .call https://greensock.com/docs/TimelineLite/call() NOTE! the proper syntax for parameters in the docs.
  19. Yeah that makes sense otherwise the ubiquitous document.ready would fail all the time too. Thanks for the info @Jonathan
  20. Thanks Jack, fixing my syntax error seems to smooth it out. I figured out the scroll bar now has an entirely different issue. Since the window wheel scroll is based on the timeline's progress if you move the scroll bar the two become out of sync and the timeline forces it to jump back to where it was the last time it's progress was set. I guess I need some more logic to calculate the window scroll position if it's moved with the scroll bar and pass that as a starting point for the timeline's progress in the event listener. Yeah if any of our resident geniuses want to weigh in you're more than welcome.
  21. Had this kicking around in my head for awhile so I thought I'd give it a try. Uses a tl with ScrollTo and a tween mapped to deltaY to scrub through it's progress. Has some promise maybe - some jankiness presumably due to constant firing of deltaY and the tween getting overwitten so many times but maybe there's way to throttle or normalize this to improve it? I also noticed using the scrollbar seems to make it inoperable, not sure what the relationship there is?
  22. I typically did it inside just a load event in that past which always seemed to work fine but I was trying it based on Jonathans rational: Is seems problematic though in my case so I'll just stick with load event on its own.
  23. @Jonathan I took your load script for a spin on a wp site I'm doing and I found the outer DOMContentLoaded listener appears problematic in safari, seems fine in Chrome. it fails intermittently on interior pages, then works on a refresh, then fails again. Just thought I'd pass it along along. Wondering if it could be because the event already fired before the listener is even added mentioned here: https://stackoverflow.com/questions/39993676/code-inside-domcontentloaded-event-not-working // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded window.addEventListener("load", function() { // GSAP custom code goes here }, false); });
  24. A solution without additional scrollMagic It's not very elegant looking with the verbose callbacks but here is a gsap solution that appears to work. It uses callbacks that pass the desired slide index and a function that loops through and adds or removes class. You could also use the function to trigger secondary animations using the index that is passed to it. https://codepen.io/Visual-Q/pen/ZdaxXQ?editors=1010