Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Chris Prieto

  • Posts

  • Joined

  • Last visited

Everything posted by Chris Prieto

  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
  16. 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!
  17. @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 ?
  18. 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
  19. Does anybody know of any cool gsap timelines showing the passage of time visually? ie: a company history or a process of some kind, very basic example (https://www.w3schools.com/howto/howto_css_timeline.asp) I apologize for the vague title and generally stupid question but after searching and only finding results relating to actual timeline functionality I figured I would ask in the case that some of you have run across some memorable examples over the years.
  20. I am also a noob but perhaps ScrollMagic to the rescue?
  21. hah I did not know my searches were visible. I was mid replying and was like well lemme see if I can figure this out (nope!). It is much appreciated.
  22. oh man, I feel so dense ? Well, thank you! I was well into researching a bunch of things that were not this lol it is literally flickity first and tweens second ?‍♂️
  23. After weighing out all the pros and cons of using something pre-made or making my own pure GSAP slider I decided to try and force GSAP and Flickity to work together. I was surprised I got this working at all. The original codepen I forked was morphing SVG shapes so it may not be the prettiest code in the world. Now that I have something working, I am attempting to add an intro animation to build out the slider itself but when I try and tween the buttons/pager dots nothing happens. I suspect it is because they are added on page load via flickity. So I am wondering if there is a way for GSAP to animate stuff that is added when page loads? Hopefully that makes sense.
  24. That is actually using GSAP. If you view the source on the example you will see a TweenMax in there. The title of the example also has a lil GSAP indicator/tag
  25. ignore me, I missed this important nugget while looking thru SVG gotchas: