Chris Prieto

Okay, this is a bit over my head but I am hoping to get it eventually. I removed the css objects and the add/remove class stuff but am unsure how to replace with GSAP. I've been trying to wrap up a project so I haven't had much time to break stuff but will get back to it shortly

So I started out wanting a preloader which I have currently working but it uses imagesloaded.js which is great for images but cares not for videos. Given my limited knowledge of js/jquery I opted for this simple solution. It seems to work and I only have a video and some bg images to load so I am hoping this will suffice. My problem is I cannot figure out how to have a timeline for the preloader that only plays when preloader is present. And then play the intro timeline once the preloader is finished. I was able to get the intro animation to play after preloader if I stuff it after the fadeOut in the .load function(). It feels wrong and I first tried to do introTl.play(); but I couldn't get it working.

@OSUblake I just tried to replace left and top with x and y and the cursors flew off in odd directions because the transitions. Once I do get that fixed it stops animating when you hover over links. I was able to get a second ring that follows around using your example but cannot get the cursor to animate when hovering over link either. https://codepen.io/ionz149/pen/PoYWNpV

awwwww maaaaan ... well that is stupid simple fix haha ?‍♂️ I even feel like I might've read somewhere that was the issue now that you mention it. Thanks again @ZachSaucier !

So first off a warning, this code I found in some codepen and I cannot seem to find it again ? The little cursor wasn't staying in place while scrolling so per this thread I made the cursor div and it's follower div position: fixed instead of absolute. And that worked but now the mouse and the cursor divs aren't synced up together and after a few scrolls down the cursor divs goes down way past the cursor as you can see in codepen. Ideally I would like for it to behave like this codepen (https://codepen.io/osublake/pen/daZwpO) it is much simpler but I can't figure out how to add a lil follower div to it that behaves the same way as my codepen.

@ZachSaucier Indeed in the Medium range of things. Deff not looking for the right solution just curious how others tackle it when using many animations throughout multiple pages. Your second paragraph covers it well. I think I am overcomplicating it in my head. I also didn't know if people somehow made the whole site one big ass animation and jump around the timeline kinda like I would do in flash back in the day. To answer questions 1. nothing too much, just needs to move too much most of the time 2. static html pages or wordpress themes, css, just enough js to be dangerous and okay grasp on php 3. currently none, working on our personal site so I am able to mess around I'm gonna start fussin' around tho and see how it works out.

Less specific help case here and more a general query into how files are structured/organized when doing bigger builds. As of late I've been using the approach provided ya'll folks in my various code pens. I generally keep vars/timeline vars/scrollmagic scenes at the top, then preloader and intro animation, then timelines/media query watcher goodness and lastly misc helpers/stuff. However this has been for single pages with tons of scroll based animations. I've recently figured out how to use barba.js with wordpress and am now trying to figure out best approach to structure all this for multiple pages with animation. I generally am just building eye candy websites and dont use vue, react or angular. Should I just have one massive js file? Should it be broken up into a few different files? Should those files be broken up based on functionality? ie: scroll.js, gsap.js, misc.js, barba.js I will assume like most code related issues there is many ways to skin this cat. Mostly looking to see how the big boys do it and incorporate the parts that make sense to me. Any pointers or suggestions will be greatly appreciated

okay so I had an 'oh sh*t' moment and just tried this out of desperation and it seems to be working ?‍♂️ new SplitText('#intro h1', {type:'lines', linesClass: 'lineParent'}); new SplitText('#intro h1 .lineParent', {type:'lines', linesClass: 'lineChild'}); I feel a lil stupid for not having tried this earlier but I appear to be cooking with bacon now. Thanks to everyone who chipped in

I tried that too but same results.

I just did but still borked. Took more stuff out of the page. It does do a quick fouc but no text splitting.

So no other ideas on what could be wrong with this?

Thanks @ZachSaucier, at least Im not going totally nutty ... I removed more stuff leaving only the #intro div and the h1 in question and now it just loads empty h1 with inline style of display:none. It was doing this prior but was not visible past the broken faux-preloader. I really am not that gifted in the ways of javascript/jquery so I am not doing anything fancy and the fact that one instance of SplitText works and not two makes me think something else is up. https://bpmmediagrp.com/test/ Why would only one work but not two? Tried all browsers, local/stg server, jquery 1/2/3. I did notice the split text file I am using is more recent than the one being used on codepen. Not sure if that makes any difference. Tried using the one from codepen but it complained because it is for demo only. demo: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js live file: https://bpmmediagrp.com/test/js/SplitText.min.js

@ZachSaucier sure: https://bpmmediagrp.com/test/ So the troublesome SplitText is on line 50 of main.js, if commented out it will begin working. If it's any help I tried setting up like Jonathan suggested in the linked thread but issue still persisted. I tried more recent versions of jquery as well but issue still persisted. I feel it has to be something *super* stupid on my part ? edit: the intended recipient of the double Splittext is the H1 in #intro div

I am not positive that is my issue. It very well might be but after reading I don't think it is. I am also assuming if this was the issue I wouldn't be able to use the single SplitText on the h1(?) I'm using the same markup and code in the codepen provided so I don't know why it would work in codepen and not on an html page. More confused as to why only one SplitText works but gives error when two are used on same h1. I tried removing everything from my project to match the codepen (jquery version etc.) but the issue still persist ?

Dang, spoke too soon. So it seems the use of two SplitText is causing issues(?) If I only use one SplitText everything works but once I add that second SplitText I get the error below and page stops loading: Uncaught TypeError: Cannot read property 'nodeType' of null I reviewed my previous usage of SplitText on past projects but I've never tried to apply twice to same object so I am at a loss as to why it only works in codepen and not on the page I am building

Actually I think I fixed by making the split text into vars, fingers crossed

Any reasons this would work on codepen but not on the web page I am working on? When I add the following lines to my main.js: new SplitText($introTitle, {type:"lines", linesClass: 'lineChild'}); new SplitText($introTitle, {type:"lines", linesClass: 'lineParent'}); I get a bunch of errors in the browser console and page wont load: SplitText.js:175 Uncaught TypeError: Cannot read property 'nodeType' of null at _deWordify (SplitText.js:175) at _deWordify (SplitText.js:173) at _setPositionsAfterSplit (SplitText.js:378) at pkg.SplitText._globals.SplitText.p.split (SplitText.js:526) at new pkg.SplitText._globals.SplitText (SplitText.js:130) at HTMLDocument.<anonymous> (main.js:33) at j (jquery-1.11.2.min.js:2) at Object.fireWith [as resolveWith] (jquery-1.11.2.min.js:2) at Function.ready (jquery-1.11.2.min.js:2) at HTMLDocument.J (jquery-1.11.2.min.js:2) I realize looking at bits of code like this isn't ideal but the codepen works so I am not sure how to replicate ? I tried to re-order my scripts but nothing changes. Are there any obvious things I might be missing? //ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js //cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js //cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js js/SplitText.js https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js js/main.js

Ahhh, thank you. I always for get about that and use stuff like: y: '105%'

Care to elaborate? I was under the impression that if I left the positioning at relative it would be okay.

well that was profoundly simple, many thanks @PointC!

I am trying to achieve something similar to the "Easy to understand, impossible to ignore™. We design digital platforms & branded experiences that position brands to matter in culture." text at the top of this page. It slides up line by line. (https://basicagency.com/) I created a quick pen but it doesn't work as expected. I thought it would be as easy as setting overflow hidden on the divs but soon realized the divs are whats being animated. Any ideas on how to set this up correctly would be much appreciated.

After much brainstorming I have come up with something inspired by Mikel's codepen I found. It is so perfect and simple but still a little confusing since I am not using an svg. Differences are that it is not all one big svg and it is horizontal instead of vertical. The timing of the text/dots/svg noodle is something I am after. https://codepen.io/mikeK/full/QREjpr I got something I like in place however when it came time to adjust the timing of everything I started messing things up so I kept trying to add new timelines/scenes to no avail. I am using ScrollMagic to control the scrolling via a timeline so i can scroll down but move content on screen to the left. I am really not sure why it's giving me so much grief when I tweak the timing of the timelines. I have reduced my issue to the bare minimum (no bulbs lit up). Right now the animation starts the second you scroll and the appearing of the steps text and svg noodle progress aren't really synced up. I would like for the animation to allow the user to scroll for a smidge before the first step fades in and the noodle starts moving towards the next step. I would also like for the step text to appear when the svg noodle is almost above the step text. There is also a red bar of text that I am trying to do a horizontal parallax type of thing on, but I have stared at it for so long I can no longer tell if it is moving or not or if it stops at some point haha Any help, hints, thoughts, pens, corrections, criticisms, etc will be very much appreciated and my sincerest apologies if this thing make ya wanna stab your eyeballs with dull pencils. https://codepen.io/ionz149/full/EBqzwK ====== @PointC story read and I shall stay persistent

Nice! I was looking at your horizontal one actually as I wasn't aware of this vertical one. This thing is a beast and a lil over my head but I shall commence the crashing and burning!

@OSUblake A vertical scroller that starts at 'Step 1' and goes thru however many more 'steps'. Jump links/indicator dots on the side that get an active class per current 'step' being shown. I forked a codepen I found with a cool jquery/gsap based vertical carousel of sorts and was able to tweak it to work like I need but the jquery is throwing me for a loop . I cant figure out what the array index numbers are for. I made what I wanted happen but I could not write it myself as I don't get what it's doing. https://codepen.io/ionz149/pen/BgMvav It is a bit of work (for me) as I would need to remove the jquery that is currently scrolling it, tie the animation to mouse scrolling (via scrollmagic or gsap goodness) and add the ability for the indicator dots to get active class and trigger the animation to show whatever 'step' is clicked. That said after posting this I am continuing to dig thru tutorials I've done and various codepens I have saved to get try and get these going on my own. I feel like I've done a little of all of these things but just not all at once ?

Thanks Zach! That link is great. I am currently just kicking around ideas and looking for inspiration and will prolly end up back here with some mangled codepens once I get going