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. You could look at loading conditionally based on some page property a body class, a name in the url etc... there's almost certainly something in the page on the admin side, or present when you are logged in to use as an identifier. https://stackoverflow.com/questions/26979733/how-to-include-an-external-javascript-file-conditionally https://stackoverflow.com/questions/5235321/how-do-i-load-a-javascript-file-dynamically There will be plenty of other similar links to look at if you search for them. You can check for a string in a url for instance without jQuery with something like this then load the scripts inside. if (window.location.href.indexOf('about') > 0) { console.log('about page is loaded') }
  2. The hero container and layers all share the same height, using their height gives you common baseline to multiply the parallax movement ratio against. If you use 800 * depth (the height of the elements) it produces the same result. offsetHeight just gets that value for you. You don't have to use this calculation, in this case it's convenient because the items are the same height, and the parallax movements are all relative to that height and Scrolltrigger also uses the hero element as a trigger so the scrub through is also relative to this height. Synergy...
  3. RE: @Visual-Q that looks closer, but not exactly right because things still jump sizes. Updated, I accidentally posted the wrong pen originally; DOH! Looking at the previous pen I assume the goal was to end up with 50% wide elements in row view. You can do that with Blakes original solution and flex-basis:50%. https://codepen.io/Visual-Q/pen/zYqLbzp Though the new flip (next post) probably makes this moot. Flex basis will still allow you to make the items have an even width there as well.
  4. Holy Cow! So you can create an element and not add it to the rendered html and it's still a valid selector that you can access and append attributes for. That's awesome.
  5. You also have to think about a very large tablet like the ipad pro which I believe resolves to 1366px wide logical width in a browser in landscape so it's well into desktop range so it would be difficult to target all tablets just by media size.
  6. Wassup, Alexy, Maybe I'm missing something, was there a question here?
  7. Maybe like this https://codepen.io/Visual-Q/pen/LYNrggm
  8. You might just be able to change the configuration for tablet and go with normal document side scrolling, without scrollTrigger for tablet. I don't have a tablet to look at this but it works on desktop as expected. You'd have to provide alternate logic for the buttons, but matchMedia and css breakpoints should allow you to set it up that way just for tablets and use scrollTrigger/scrollTo etc on desktop. https://codepen.io/Visual-Q/pen/xxVzVBj
  9. Not sure exactly what you're asking if you mean to control by class name though as opposed to just accessing .line or .chars arrays directly (first example) the second example in this pen adds class name to divs and creates an array from them. https://codepen.io/Visual-Q/pen/dyMKYro
  10. I've never used draggable so someone else would have to weigh in on that: Here is a post with a discussion of draggable and scrollTrigger though:
  11. The pin spacer height as well as the top position of the element it encloses appear to set the position of the target element to where the intersection point is. So start:"top center" moves the start of the element to the center of the viewport. You can see this by changing the second value to 50%( same result as center) try other values like 100px and the result is similarly predictable. This is hard to understand with respect to the description of start in the docs: "Describes a place on the trigger and a place on the scroller that must meet in order to start the ScrollTrigger. So, for example, "top center" means "when the top of the trigger hits the center of the scroller" It might be helpful expanding in the docs on how and why pins/pin spacers react to start this way as it doesn't seem clear why.
  12. Looks good... yeah I see that the logic fails on mine in the final position, your logic seems to work though so no reason for me to revisit it. Main take away is how you can use scrollTo together with scrollTrigger so you can both scrub and tween through a scrollTrigger animation, and use scrollTrigger.scroll() to always know where you're at. Which I think is a pretty good solution.
  13. And If you want to also disable all window scroll when modal is open, might be a simpler way https://codepen.io/Visual-Q/pen/jOqxXQj
  14. Don't put the modal in the parent. https://codepen.io/Visual-Q/pen/eYZrbLN
  15. You might have to do some additional modifications but you could do the calculations differently setting a series of stopPositions for the scrollTo calculated to match the number of sections and then move forward or back to targets (in this case three sections) based on a comparison to scrollTrigger scroll() position, something like this. Pardon my old school js I still haven't caught up to all the cool kids using ES6. https://codepen.io/Visual-Q/pen/OJNZOPN Note: I know there's still an equation lurking around that would take in the scrollerwidth, sections length and scroll() position and spit out a number directly without the array and loops but I haven't wrapped my head around it yet. Maybe I'll have an epiphany but anyone else feel free to weigh in on this.
  16. Hey Saraf, Somebody may spot something but It's generally pretty hard to diagnose issues just seeing code without context. If possible try to create a reduced test case on codepen or al least a link to the site if so we can see what's happening. Also you should probably review the best ways to work with transforms in gsap in the cssPlugin docs, using gsaps properties may be more performant: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin
  17. Based off Zachs excellent structure... a few adjustments. https://codepen.io/Visual-Q/pen/eYZVrpJ
  18. Hey MP, I was playing with this earlier, It doesn't work perfectly but maybe it will help, btw if you meant the cropping of the image leaving excessive orange setting svg:not(:root) {overflow:visible;} seemed to prevent that. Don't ask for an explanation though I have no idea what it does I just examined the item in the inspector and overrode the default user agent setting. i think was able to get closer to what you want so you can work it out from here. https://codepen.io/Visual-Q/pen/KKzQVxM
  19. Yes you can loop over sections that way: https://codepen.io/Visual-Q/pen/OJNzKQK Though you don't have to use jQuery if you're comfortably with normal js forEach or even just regular js loops.
  20. ScrollTrigger is pretty new so you'll still run into a lot of old pens on scrollMagic kicking around.
  21. Whether you use scrollMagic(blasphemy) or scrollTrigger as Zach showed: The header was set intitially to invisible with autoAlpha:0, you can just set this directly in the css by the way, and then only the specific trigger element .show-menu is targeted to show the header with autoAlpha:1 The loops you created over all the sections and mutliple timelines were unnecessary and not working correctly.
  22. I'm assuming by 3d feel you mean elements moving vertically at different speeds. This is referred to as parallax. Here is a simple example using gsaps scrollTrigger https://codepen.io/GreenSock/pen/JjYPQpN Setting this type of thing up on a complex page will take some work and at least intermediate if not advanced gsap knowledge so if you're new to the platform you should probably familiarize yourself with it before immediately trying to jump into something like this. The getting started page is the best place to start:
  23. I'll break my rule on answering scrollMagic questions just this once: https://codepen.io/Visual-Q/pen/LYNeKLR
  24. Hey dark, The problem is scrollTrigger is looking at doc scroll position so when you separately animate the elements it is out of sync because the window hasn't scrolled. I can think of a few to approaches this which you would have to work out the mathematical relationships for: 1. Use the scrollTo plugin to animate the window position for prev next instead of just the x pos on the elements. Then you actually animate through the original scrollTrigger. https://greensock.com/docs/v3/Plugins/ScrollToPlugin 2. Add an id to the scroll then you can use .scroll to get and set the scroll position after the element animation to match where it should be in scrollTrigger something like ScrollTrigger.getById('myId').scroll(dothemath)}. https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroll() 3. I think you could also use snap here but I haven't had an opportunity to try it out yet so I'll leave you to investigate that. Maybe some of our scrollTrigger veterans can weigh in on this? https://greensock.com/docs/v3/Plugins/ScrollTrigger
  25. Hello Filip3000, If you have an issue please create a new post detailing your specific problem, tacking questions on to posts that are several years old is very confusing. Note also that scrollMagic is not a gsap product so we don't officially support it here, though people are free to assist if they like, so you may want to have a look at gsap's scrollTrigger. Re how to use a loop: Zach has an excellent example from: https://css-tricks.com/tips-for-writing-animation-code-efficiently/ https://codepen.io/GreenSock/pen/VwLBajb