ThePixelPixie

@GreenSock - That demo above is very close to what I was just searching for. I'm curious about 2 things though: 1. Why does it automatically land on the 2nd panel instead of the first? I was trying to look through the code and wasn't seeing anything immediately that helped me understand that. 2. How would you move the nav from being static at the top to being static on the left side? 3. If each panel is slightly less than 100vw can the next panel be clicked to advance as well? Thank in advance.

@nico fonseca - Oh thank you! That works GREAT!

Hi there, I'm adapting some code from one of the other forum questions here. It's all working pretty nicely. But I'm just not sure how to make an adjustment for transitioning the color. Right now the transition to the full-page background color is fairly abrupt. I'd really like it to be slightly more gradual. Is that something I can do just with CSS transition? I wasn't having any luck with that earlier, so I'm guessing it actually happens in the js somewhere. Actually, in general, the content for the full-screen part just feels clunky on that transition right now - which may also be because I'm using flex classes & bootstrap to position the content vertically and horizontally centered. Is there a better way to do that with Tweening? Thanks in advance.

@nicofonseca - OO O OOOOOO!!! I had *thought* I'd set the images to opacity 0, but it turns out I had *not*! Now it's working GREAT! Thank you thank you THANK YOU!!!

@nicofonseca - You mentioned updating the pen without jQuery. Is it possible that since the dev site I'm working on (it's a WordPress site) *does* use jQuery, that the issue is a conflict there? I don't have immediate access to the logs and will have to ask for that later this morning. Nothing's showing up in Console that seems out of sorts though. I definitely appreciate the "some small things" notes. Those are very helpful, and much appreciated! (i'll repeat, this is the most responsive and helpful forum I've ever been on. Just awesome what you and the others do here!) Alas, the updated code above those is resulting in exactly the same issue I was having with your original update to the syntax from yesterday. It's sitting on just the last image and scaling in and out, in and out, but not cycling through the images.

@nicofonseca - you rock so hard, man! Thank you! This is the most responsive help forum I've ever been a part of! I am having trouble with it though in my live site. It loads all the images fine, and for the first second or so you can see the first image. But then it just sits on the last image, scaling in and out, in and out. Not sure why. Just before I saw your reply, I had found this pen, that was *nearly* working on my site, except that the images cycle through super fast. It doesn't look as complete as yours either, but I'm having trouble figuring out how to troubleshoot between the two. On my dev site, yours appears to scale and be the speed I want, but doesn't show me all the images. The other one actually cycles through the images, but seems less...something: https://codepen.io/ebinabo/pen/LYGJNdY

Soooooo....should I assume that the CodePens from above using TweenMax would be outdated, so I'd just use gsap now? If so, how might the functions change in terms of syntax? I would really love to use this crossfading slideshow on a site I'm currently working on.

@Cassie - Yeah, if the marquee tag wasn't deprecated, I had one that was working great! So I guess this is the main workable alternative. I've tried so many different scripts, and none of them have come close to what marquee would do, except for this (so I'm very grateful) @GreenSock - That all looks great. I don't know enough about GSAP yet to know what's what. I was literally just copying the code provided in the first response to my post above. I'll work on your suggestions this morning. Thanks SO much.

@Cassie This is the function I've got (with your bit commented out right now): jQuery(function($) { $('ul.ticker li').wrapAll('<span class="ticker-items">'); var tickerWidth = $('ul.ticker').width(); var spanWidth = $('ul.ticker span').width(); $('ul.ticker span').clone().appendTo('ul.ticker'); $('ul.ticker span').wrapAll('<span class="ticker-wrapper">'); gsap.set( '.ticker-wrapper' , {x: tickerWidth } ); var tl = gsap.timeline( {repeat: -1} ); tl.to( '.ticker-wrapper', { duration: 1, x:"-=50", ease: Power0.easeNone, onComplete: function(){ var style = window.getComputedStyle( $('.ticker-wrapper')[0] ); var matrix = new WebKitCSSMatrix( style.webkitTransform ); if( matrix.m41 < 0-spanWidth ){ gsap.set( '.ticker-wrapper' , {x: 0} ); } this.invalidate(); }, }); //gsap.to('.ticker-wrapper', { // x: 50, // repeat: -1, // onRepeat: () => { // console.log('repeating') // } //}); $('ul.ticker').on('mouseenter',()=>{ tl.pause(); }); $('ul.ticker').on('mouseleave',()=>{ tl.play(); }); });

@Cassie It's definitely repeating. It's just not cloning it more than once in order to make it take up the full width, regardless of number of items.

@nicofonseca - well, it was all working perfectly on Codepen. But when I moved it over to my WordPress site, it's *mostly* working correctly, except it only clones the set of items once. I tried playing with the "repeat: -1" and changed it to "repeat: 50", but it didn't make a difference. I have gsap.min.js enqueued after jquery and bootstrap, and have the separate function put in the footer, below the wp_footer() area where jquery, bootstrap, and gsap are placed by functions. It's scrolling, but it's only repeating once, and it's not stretching the full width like I have in this pen: https://codepen.io/ThePixelPixie/pen/vYZYbqj I could provide a link to the dev site in DM, but can't post the link here since it's for an organization I'm developing for.

@nicofonseca Thank you so much! That's *exactly* what I needed! Many thanks!

Hi there. I was looking at this thread: Wondering how the example might be modified to allow for items to pause on hover so a link can be opened.

@Cassie, My apologies. I thought I *had* forked that codepen with the video. The other one was posted as an example of what I was wanting to do with the fade, so it wasn't forked. Also, I do know that it's a CSS positioning issue. But when I get the "meet us at the mall" positioned correctly, and then "for" positioned correctly, the scrolling text isn't in the right place. I'm not understanding how to position that part properly, I think. But I will keep working at it. Thank you.

I've been given a mockup of an idea for a timeline interface. I have no idea where to start to find something I can use as a jumping off point to create this. Since I was kindly sent in a perfect direction for another item I was trying to emulate (and I'm *nearly* there with it), I'm hoping someone can send me down another fun rabbit hold here? Thanks in advance.

Oh my! That's getting me pretty close! Thank you SO much! I am still extremely new to gsap, so please pardon my lack of knowledge here: I'm having trouble positioning these things on the page. When I try to move them around, the text turns green at the wrong place. Ideally, All of this would appear on the right side of the video, vertically centered. Then the other issue I don't know how to solve is making the text fade from transparent up to green, then fade out to transparent when it goes back up (and of course in reverse if scrolling the other way). https://codepen.io/ThePixelPixie/pen/zYwRWMZ Just found this pen with the text fading in and out on the x axis. That's basically what I'd like to do with this text on the y axis. But I'm just not figuring out how to combine the pieces of the two. https://codepen.io/GreenSock/pen/WNrYNQX

I've been trying like mad to figure out how this panel on the https://www.wealthsimple.com/en-ca/product/cash website was done. Are there any of your examples that I've missed that might do this, or something similar? Thanks in advance. ~Laura

Well, I included the rest of the page because my concern is that there's something from the rest of my code that's interfering with this panel. I copied the code provided in this pen (https://codepen.io/GreenSock/pen/LYRwgPo?editors=0010) since I'm very new to greensock. So I don't really know how to write my own const vars yet.

Hi there, I'm having trouble getting this to work properly. I'm wanting the infinite scrolling cards here between the "about us" block, and the counters. But they aren't showing up, and they're causing a weird looping after I scroll to the bottom, so I never actually reach the bottom. What am I missing? Thanks in advance. ~Laura

Well, nevermind. I was dumb. I forgot to close some divs. It's working great now {facepalm}

Hi there. I'm using one of your examples (horizontal snapping sections advanced) as a base for what I'm trying to do. But my website is built with the bootstrap framework, so I added that to the pen. Things are definitely...not right. And I'm wondering if that's because there's some inherent compatibility problem? Or if I need to load the scripts in a different order? I'm just not sure. And it's clearly just not doing the scroll properly at all. Thanks in advance.

Sorry I've been absent from my own thread I will take a look at all of these items this evening. Thanks everyone!

I have no idea. Truly, I just copied the company-logos.js script from the Greensock footer. The only thing I modified was the number of columns down from 5 to 4 and the corresponding numbers as well. It's all inside the CodePen. Does nothing stand out for you there? I'm sorry. I'm sure this should be very simple for me to figure out, but honestly I'm at maximum stress levels getting ready to leave on a business trip and my brain is just going....GGAAAAAAACKKKK

Well that certainly has solved *something*, at least in CodePen. I already have jquery and Tween Max loaded on the WordPress site (and yes, I don know how to register and enqueue correctly). But in CodePen right now, only 2 logos are appearing and they aren't changing at all I do note an error in Console on my website that says "Can't find variable: TweenMax" in the javascript (which is in the js section of the CodePen).

This is my first time trying to use Tween of any form (Max or Lite). I really like the company logo animation on the Greensock pages and thought I'd try to figure out how it was done. So far I'm not having any luck. Could someone help me here? I'm sure I'm missing some sort of key component to getting this going. I copied their js file for the logos, copied the html and the matching css...called the CDN...I'm just not sure what I'm missing here. All help appreciated!