Jump to content

Chris Prieto

  • Posts

  • Joined

  • Last visited


12 Newbie

About Chris Prieto

Profile Information

  • Location
  • Interests
    Banjos, Booze, Cannabis, Code

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. I tried that too but same results.
  3. I just did but still borked. Took more stuff out of the page. It does do a quick fouc but no text splitting.
  4. So no other ideas on what could be wrong with this?
  5. 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
  6. @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
  7. 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 ?
  8. 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
  9. Actually I think I fixed by making the split text into vars, fingers crossed
  10. 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
  11. Ahhh, thank you. I always for get about that and use stuff like: y: '105%'
  12. Care to elaborate? I was under the impression that if I left the positioning at relative it would be okay.
  13. well that was profoundly simple, many thanks @PointC!
  14. 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.
  15. 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