gredesign
Recent Profile Visitors
1,835 profile views
gredesign's Achievements
Recent Badges
0
Reputation
-
Thanks for looking into that Shaun and for the compliment on the site. So I had changed it to 0% for all of the videos and it fixed the 2nd and 3rd video, but threw off the position of the first video that loads. It made things even worse when I resized my browser or preview in the other browsers that it previously worked in. (Its strange that when I resize my browser without changing anything, all positions are locked back in place perfectly. Its just on initial load.) -
I have three videos on my home page that are background videos. They are set to absolute positioning so that they overlap. I have three buttons that also control which video is being shown. I'm using the latest GSAP for this functionality. Unfortunately, when the home page loads, the first video appears fine, but when I click the buttons to show the other videos, the 2nd and 3rd video's position shifts vertically. This issue only appears on Windows 10 EdgeHTML 18. In other browsers, it works fine. Spent hours trying to figure this out, in almost checked out. I think the issue rests with the background video or how GSAP sets the display of the background video when it is toggled. Need some help. damage-esports.com
-
Hey, one more question. Is it possible to use a fromTo with the textPlugin? For example, could I do the same animation above, but the letter fade from 0 to 1. I tried, but it faded the entire word in, but not each letter sequentially.
-
Oh, crazy. I see. So on my end, I didn't have nested script tags, but I did mis-spell "script" as "scipt". I think this cause the outputted code to nest one script inside of another. Before: Part that was cut off by UI. After: Anyhow, thanks so much! Eagle eyes.
-
Hi Jack, I don't have any other loaded. Its a fresh build. I just tried to implement the code, but still getting the same error. Here is what I have put: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> <scipt src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js"></script> <script> gsap.registerPlugin(TextPlugin); TweenMax.to(".myth", 1, {text:{value:"Reality", padSpace:true}}); </script> I did the registerPlugin part because I kept getting this error: But then, once I registered it, I got this error: I can't win. Lol. Link: https://test-type-animations.webflow.io/
-
Thank you @PointC !
-
Ok. Thanks Zach. I'll see if anyone has insights, but even if not, that is okay because I'll be using the most up-to-date version now. One more thing… I meant to not put the company name in the example. Would you mind replacing copy with "Printing is awesome with company", since the Codepen post will be public? Thanks much and sorry about that.
-
Thank you Zach, I'll move forward and start using the new syntax. I am still confused though about why my code wasn't working. I was targeting an h1 tag with the class name of "myth". Then I converted its textual content to "Reality". How was the text value invalid? My DOM: My JS:
-
Honestly, I have never used GSAP 3. I'm so comfortable with this old version and know my way around it for the most part. I've been hesitant to jump on anything new that might require a learning curb. But I understand though, I need to keep up. Lol.
-
Im getting this error: invalid text tween value: [object Object] Not sure why. I thoroughly checked everything and unless I'm still missing something, this is a complete mystery. Here is the link: https://test-type-animations.webflow.io/ I'm working in Webflow, so didn't include a Codepen link. Here is the code I'm implementing before </body> tag: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script> <scipt src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/plugins/TextPlugin.min.js"></script> <script> TweenMax.to(".myth", 1, {text:{value:"Reality", padSpace:true}}); </script>
-
Thanks Zach, That is a good idea. I appreciate the direction given. As we speak I'm seeing if I can work it out that way (I hate the Math. Lol.) Alternatively, I also may look into performing some sort of hit test if possible with divs to eliminate having to do the math if I run into the frustration wall.
-
Thanks, I ended up not going with the drag and scroll. It became too involved, I have a short deadline, and I'm not a super hardcore coder (though I am learning). I did complete a scrolling version, but I know that the calculations in the "if" statements could have been done with less lines. Do you have any recommendations that Greensock already has in their API that will make the lines shorter, or logic that would make more sense? http://codepen.io/gredesign/pen/BjRrZx
-
Beautiful example. Thanks. When I drag now, the foreground updates to create the parallax effect. But one last thing is missing. When I switch from dragging to scrolling, the original calculations from the drag remain, and the parallax is not updated. How can I set "the scroll" calculations the same as the drag. Currently, I have this: onDrag:function(){ TweenLite.set('#fg',{x:-this.x*.5,y:-this.y*.5}) } Is there an event for the scroll when I'm using Draggable.create, etc?
-
Hello Zach and sorry for the confusion. The reference you supplied is based on mouse move (thanks though). I am wanting to have a parallax effect between the foreground and background when the viewport is either scrolled or dragged.
-
Hello, I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that: 1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background. 2) Set the container itself to scroll/drag and affect both div's together. 3) Change the speed the background div to be a little slower, in order to give the parallax illusion. So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help.
