mosik4
mosik4's Achievements
7
Reputation
-
Well that was not exactly true. I can see that dpotferstudio.com has overflow-y: scroll in the main wrapper. What is going wrong for me is that I can not figure out how to lock the address bar on mobile browsers while doing animations with ScrollTrigger. <!DOCTYPE html> <html lang="en"> <head> <title>dpotferstudio</title> </head> <body> <div class="main-wrapper"> <div id="app"> </div> </div> </body> </html> html { position: fixed; width: 100%; height: 100vh; overflow: hidden; } body { position: fixed; width: 100%; height: 100vh; overflow: hidden; } .main-wrapper { width: 100vw; height: 100vh; overflow-x: hidden; overflow-y: scroll; } #app { overflow: hidden; }
-
Thank you for your replies. I think you are correct Zach. I can not lock the address bar and use ScrollTrigger. Locking down the address bar requires overflow to always be hidden. And you have to have overflow on scroll or auto at some point in order to scroll with ScrollTrigger. Dpotferstudio manages to do this because hammerjs does not have these same requirements as its not based on scrolling and can work with overflow hidden. http://dpotferstudio.com/ This is atleast my theory here. Correct me if I am wrong.
-
Thank you for your reply Zach. I still can't figure it out on my website though. I think I am struggling because of the type of fixed 100vh effect that I am after. I have a fixed div inside of the fixed body. And css grid inside of the fixed div. What am I missing here? I was too harsh on my phrasing here. Since I am going for that 100vh feel I dont want to have the address bar going in and resizing my container.
-
Hi, I am trying to get my website to work smoothly with Scroll Trigger. But the address bar is continuously hiding and showing when I am scrolling through the page which destroys the user experience. I tried searching for solutions but to no avail - might be my lack of knowledge of css. Here is my website (try it on mobile to understand what I mean): https://tbdalen.github.io/ And here is my repo: https://github.com/tbdalen/tbdalen.github.io Here is my inspiration for this site and they managed to prevent hiding the address bar. They have used hammerjs here though: https://dpotferstudio.com/
-
Here is a simple component for context and reference: index.js import React from "react"; import styles from "./index.module.scss"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; if (typeof window !== `undefined`) { gsap.registerPlugin(ScrollTrigger) gsap.core.globals("ScrollTrigger", ScrollTrigger) } class Index extends React.Component { constructor(props) { super(props); this.container = null; this.trigger = null; this.tl = gsap.timeline({ paused: true, scrollTrigger: { trigger: this.trigger, scrub: true, markers: true } }); } componentDidMount() { this.tl.to(this.container, { x: 100, duration: 2 }); } render() { return ( <div> <div className={styles.container}> <div className={styles.header} ref={div => (this.container = div)}> <h1>Hello</h1> </div> </div> <div className={styles.trigger} ref={div => (this.trigger = div)}> trigger </div> </div> ); } } export default Index; index.module.scss .container { position: fixed; } .header { position: absolute; top: 40%; left: 50%; } .trigger { position: absolute; bottom: -50em; }
-
Woop woop! I love this community and I love ScrollTrigger ? It worked when I included both registerPlugin and the temporary workaround inside the if statement. import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" if (typeof window !== `undefined`) { gsap.registerPlugin(ScrollTrigger) gsap.core.globals("ScrollTrigger", ScrollTrigger) }
-
Hi Rodrigo and thank you so much for your response! Here is my repo: https://github.com/tbdalen/tbdalen.github.io.git And this the entire error: failed Building static HTML for pages - 0.822s ERROR #95313 Building static HTML failed for path "/" See our docs page for more info on this error: https://gatsby.dev/debug-html TypeError: _toArray is not a function - render-page.js:3746 ScrollTrigger.init */tbdalen.github.io/public/render-page.js:3746:20 - render-page.js:3707 new ScrollTrigger */tbdalen.github.io/public/render-page.js:3707:10 - render-page.js:4317 Function../node_modules/gsap/ScrollTrigger.js.ScrollTrigger.create */tbdalen.github.io/public/render-page.js:4317:10 - render-page.js:4872 _scrollTrigger */tbdalen.github.io/public/render-page.js:4872:105 - render-page.js:6362 new Timeline */tbdalen.github.io/public/render-page.js:6362:27 - render-page.js:7978 Object.timeline */tbdalen.github.io/public/render-page.js:7978:12 - render-page.js:11046 new indexPage */tbdalen.github.io/public/render-page.js:11046:73 - react-dom-server.node.production.min.js:36 d [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:36:320 - react-dom-server.node.production.min.js:39 $a [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:39:16 - react-dom-server.node.production.min.js:44 a.b.render [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:44:476 - react-dom-server.node.production.min.js:44 a.b.read [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:44:18 - react-dom-server.node.production.min.js:54 renderToString [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:54:364 - render-page.js:618 Module../.cache/static-entry.js.__webpack_exports__.default */tbdalen.github.io/public/render-page.js:618:28 - render-html.js:28 [tbdalen.github.io]/[gatsby]/dist/utils/worker/render-html.js:28:36 - debuggability.js:384 Promise._execute [tbdalen.github.io]/[bluebird]/js/release/debuggability.js:384:9 - promise.js:518 Promise._resolveFromExecutor [tbdalen.github.io]/[bluebird]/js/release/promise.js:518:18 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! gatsby-starter-hello-world@0.1.0 deploy: `gatsby build && gh-pages -d public -b master` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the gatsby-starter-hello-world@0.1.0 deploy script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! *\npm-cache\_logs\*-debug.log
-
Hi, I am trying to get the Scroll Trigger to work on my gatsby website. I am a beginner at both Gatsby/React and GSAP so forgive my ignorance. I created a sandbox of how I did this in Gatsby. It works on development build like here on this sandbox but not when I try to go production build. I get this error "failed Building static HTML for pages". Does anyone know what I am doing wrong? Thanks! https://codesandbox.io/s/unruffled-cannon-v5wh4?file=/src/App.js
