Jump to content
GreenSock

darkgr33n

ShockinglyGreen
  • Posts

    68
  • Joined

  • Last visited

Posts posted by darkgr33n

  1. 19 hours ago, totem said:

    Hello, I'm new here!

    What I'm trying to do is to scale a green background from the center, in a way similar to this (with 100% border radius), except that I just need the effect to cover the screen, and not check where the click was made. Is there a simpler way to do that?

     

    A very quick and dirty way to get that affect using the demo you linked to, would be just to amend line 21/22 to:

     // Event coords
      var x = vw/2;
      var y = vh/2; 

     

    which is just the centre of the viewport based on the variables set earlier in the code - then the circle comes from the centre of the viewport at all clicks.
    you may be able to then remove the other bits you don't need. 

    as I said, quick and dirty.

    • Like 1
  2. 13 hours ago, akapowl said:

     

     

    Addition:

    Just to make sure, here's a pen, with the changes restricted to the variable handling mentioned above, only.

     

     

    Thanks for the additional confirmation as well!!

    All appears to work fine now, many many thanks. Would you believe I had it like that to begin with, but as part of my attempts to fix the original issue, I had moved all the variable inits outside of the function 😕

    I'd definitely call it brilliant and I'm sticking to that! I would still be struggling now without your help -- and I'm also learning a lot more working with scroll trigger, but more importantly, the community. Who knows, one day I may be able to help out someone too, that would good.

     

    Cheers! 

    • Like 1
  3. yeah it does seem that when the first component is translating the first image, it is also effecting the second instance of the component -- at the point when the first instance of the component should unpins, it then moves the second components second image up before the scroll actually continues 


    I'm looping through each <section> tag and then selecting the image using section., so i assumed it would be specific to the element within it's parent, but i've obviously missed something ...

     

    // LOOP through the <section> tags
    gsap.utils.toArray("section").forEach(function(section) {
    	
    	if (section.querySelector('.cmpnt--image-coverup') !== null) {
    		// the <section> contains an element with the class cmpnt--image-coverup so set up the images
            imageTwo = section.querySelector(".ic__image--two");
          ---rest of code---
        }
    });

     

  4. I spoke a little too soon!

     

    I think it needs a little tweak; because i was using random stock images I didn't pick up on it 😕

     

    See the Pen ExgamYj by darkgr33n (@darkgr33n) on CodePen

     

    In demo, the first instance of both of the two components works fine;

    however, in both of the second instances of the components, the second image - which should scroll from the bottom over the top of the first image - is initially in view until the first image is pinned, and then it works as expected.

     

    Something in the first instance of each component is adding something extra to the second instance, i'm not sure if its the pin-spacing or if it's a result of the some kind of timeline issue. I've just re-read the most common mistakes, and can't see anything obvious - but i'm almost sure it is. Like, setting the timeline to from(yPercent:100) is actually doubling on the second instance of the components.

     

    Just in case anyone has spotted the error, I thought I'd reach out while I continue the struggle ;)

     

    Cheers!

     

     

  5. ok, I think I've managed to make it work, although I'm not sure on its efficiency.

     

    See the Pen ExgamYj by darkgr33n (@darkgr33n) on CodePen

     

    I first looked at traversing the page via the parent section tags, building an array of each instance of the classnames I needed and then I was going to step through the array and do something :

     

    var cmpnt__list = [];
    // LOOP THROUGH EACH SECTION ELEMENT.
    $('section').each(function () {
    	if (this.querySelector('.cmpnt--page-split') !== null) {
    		cmpnt__list.push("cmpnt--page--split");
    	}
    	if (this.querySelector('.cmpnt--image-coverup') !== null) {
       		cmpnt__list.push("cmpnt--image-coverup");
        }
    });

     

    ....but it just seemed overcomplicated and I wasn't really sure what to do with the array after i'd got it.

     

    In the end, rather than using my two gsap.utils.toArray , one for each component, I used the toArray on the parent <section> tags, and then look to see if they contain any of the classnames i'm looking for, and if it does, i create the scroll trigger right there, so it's always in the correct order. 

     

    I'm sure i can optimise a little more but, for now, it seems to be working :) 

    Many thanks for your help

     

    Cheers!

    • Like 2
  6. thinking out loud, as I won't know what order the components might be in, I can't set the refreshPriority beforehand, so I'll need to create something to look through the page and grab all possible components and then set the refreshPrioirty of each scrollTrigger according to the order so I think will need to look at the scrollTrigger.sort method. I think there are three or maybe four different components that I need to build, and sometimes one component may appear more than once. 

  7. @akapowl

     

    Thanks for that, I must admit I hadn't looked for a solution within the docs, I just assumed I was doing something really stupid.

    I would have thought what I was doing - creating reusable functions - would have been reasonably standard, but perhaps the "in any order on the page" is the uncommon thing here - but I'm glad I'm not a million miles away with my approach!

     

    I'll give what you suggested a go and report back. I could see it was something to do with the pin-spacing but couldn't quite work out where it was going wrong.

     

    Thanks again for your time

     

     

    • Like 1
  8. Hey all,

     

    I'm stuck on an issue and just can't for the life of me work out what's going on.

     

    I've created a cut-down version of one of my pages to illustrate.

     

    So, I have about 10 pages. Each page can have a number of  'components'.

    Each of these components have a variation on a basic wipe animation.

     

    I have one js file, which I'm including in each page, and the basic idea is: we look at the page and see which, if any, of the components we have, and then set up the page accordingly.

     

    I'm using gsap.utils.onArray to look through the page and see if there is one or more named components:

     

    gsap.utils.toArray(".cmpnt--page-split").forEach(function(ps__section) {

     

     

    The two components shown in the codepen demo i've called 'page split' and 'image coverup'.

     

    As it currently stands, it works fine. I even celebrated with a cup of tea.

     

    However, one of my pages needs to have these components in a different order. so I swapped the order in the HTML and the thing went bonkers 😕

     

    If you look at the codepen that works, in the HTML there are three components, the first of which is commented out for demo purposes ;) 

     

    <!-- # IMAGE COVERUP COMPONENT -->

    <!-- PAGE SPLIT COMPONENT -->

    <!-- IMAGE COVERUP COMPONENT -->

     

    however, if you uncomment the first IMAGE COVERUP  and comment-out the last one, when you run it again all hell breaks loose when it tries to deal with the PAGE SPLIT component.

     

    I'm not sure if its the way I'm using gsap.utils.toArray because if the order of the components in HTML matches the order in of the utilsonArray in the JS, it works, otherwise ... it don't. And I can't work out how its breaking.

     

    I think I'm missing something really obvious, but am at a loss at the moment. 

     

    Any idea what I'm doing wrong ?

     

    Cheers

     

     

     

     

    See the Pen NWRWQPv by darkgr33n (@darkgr33n) on CodePen

  9. Hey Zach,

     

    Superb!

     

    That's exactly the effect I was looking for -- and has also given me a couple of new pointers for the future too.

    It makes total sense  - I wasn't aware you could a) attach a tween to the onEnter/onLeaveBack calls in that way and b) hadn't properly grasped the impact/usage of the "overwrite:true" prop to kill the tween either. I'll make sure I do some reading around that one ;)

     

    Many thanks (again!).

     

    Cheers!

     

  10. Hey everyone,

     

    I've had a few days away from GSAP and seem to have lost what little knowledge I had gained o.O 

    I think this should be relatively simple but I seem to be struggling to visualize what's happening.

     

    What I'm trying to achieve on my .wrapper element is:

     

    1. Split Text staggers in from 0 opacity. ☑ done
    2. element waits 5 seconds and fades out over 2 seconds ☑ done
    3. As you start to scroll down the page, element fades back in over 1 second ☑ done
    4. continue to scroll down the page as normal
    5. then, when you scroll back up the page - the element should still be visible from #3. 
    6. when you reach the top of the viewport, element should wait 5 seconds and then fade out over 2 seconds (same as in #2)

     

    I've tried a number of variations but am clearly struggling. 

     

    I know I need to be able to deal with things like people scrolling down the page before the initial animation has finished etc, but i'm obviously not correctly using the onEnter, onEnterBack etc, and at some points had the element hidden due to the initial settings. 

     

    I've tried manipulating one timeline, but the current pen has an initial timeline for the split-text coming in, and then fading out -- and then an additional timeline for the quick fade-in and another one for the longer fade-out when you hit the top of the viewport again.

     

    I had it working when the toggle actions were a simple play and reverse when you come back in the viewport, but by adding the extra timelines to create the different durations and pause I seem to have fallen down a bit of a rabbit hole ... 

     

    I've read through the docs and a few posts but can't seem to get it ?

     

    Cheers!

     

     

    See the Pen pobPQEx by darkgr33n (@darkgr33n) on CodePen

  11. :)

     

    No you didn't do much - only completely saved the day!  🦸

     

    I will try and see if I can find some trackball users - in fact I should do a search for all types of input device - but it's a reasonably targeted industry audience and I don't think there's many that stray too far from a mouse :) 

     

    Cheers!

     

     

  12. Zach,

     

    Absolute Genius!

    I didn't know you could clamp the mouse direction in that way.
    Tested this morning on a macbook and imac - both with magic mice - and the reports are that it works perfectly! Buttery even.

    Thank you so much for this. Those seven lines of code made my day - and means I'm back on track.

     

    Cheers!

     

     

  13. 22 minutes ago, ZachSaucier said:

    There are other types of mice that also allow horizontal scrolling. And laptop touchpads.

     

    I kind of fell into the project and hadn't considered much beyond what I was aware of 😕 I should have researched more. Lesson learnt!

     

    22 minutes ago, ZachSaucier said:

    You could add a visual indicator of which way to scroll. Or one for dragging. Or just let the user figure it out :) 

    That is an interesting option. Not sure how many people have 'alternative' input devices, but I suspect more than I had bargained for! 

     

    Dragging works quite well, and I do like the 'figuring out' option. Unfortunately the client had seen the buildinamsterdam site which works well for all input devices but i'm not skilled enough to properly decipher how they're doing it. I'd seen they were using GSAP and kind-of assumed I'd be able to do something similar. Close, but no cigar 😕

     

    I'm thinking perhaps the vanilla wheel object could be the way to go but without manual transforms I'd lose a lot of the polish that GSAP allows. At least easily, anyway. I've seen a few normalising-wheel type scripts to try and cope with the differing deltas etc, but was hoping it wouldn't be necessary.

     

    Cheers! 

  14. Hey Zach

     

    I was afraid that would be the case 🤢

     

    I didn't know Magic Mice existed when I embarked on the project - and it was working beautifully on PC and iOS/Android. 

     

    Gutted.

     

    Less than a week to go before launch - I have no option but to rebuild so I guess I'll have to use some kind of scroll jacking and have a real horizontal scroll.

     

    I'll still be able to use GSAP on the internal pages but looks like I'll have to try and find another way for the landing page!

     

    Thanks for taking the time to reply though.

     

    Cheers!

  15. Hey Zach,

     

    Thanks for your reply.

     

    No, there is no content before or after this scrolling content. 

    It's basically a landing page, and when you click on any of the sections within the scroller, it then goes to that specific page, so in that sense it's standalone.

     

    Hopefully that's a good thing!

     

    Cheers!

     

  16. Hey,

     

    I'm getting near the end of my project but have come across an issue I'm not sure how to resolve in the below. 

    I'm a PC user and t's working on PC and also on a Mac with a normal mouse, however during final testing a Mac user with a Magic Mouse has indicated that it doesn't work as expected. As a PC user I had no idea such magical items existed, but in essence, there is no physical wheel on a Magic Mouse and you're able to use it to scroll vertically and horizontally just by swiping the surface of the mouse. As such, they are expecting to be able to scroll the page horizontally by using their horizontal swipe - but of course as we're fake scrolling, they have to swipe vertically to move the page horizontally.

     

    The question is: is there an easy fix for this ? 

     

    Obviously, with a week to go before launch, I'd like to avoid a complete rewrite given my GSAP skills are still in their infancy, but perhaps the only way is to actually use some script to take control of the mouse wheel and change the way the way it fires and have a real horizontal element.

     

    It's hard for me to test as I'm not a Mac user, but the demo below works fine for me on PC, and works if you swipe vertically on a Magic Mouse. Are there any Magic Mouse users that have found a solution to this ?

     

    See the Pen YzqjGQW by GreenSock (@GreenSock) on CodePen

     

    Cheers!

     

     

  17. @akapowl

     

    Wow.

     

    Incredible work. I can't thank you enough, and breaking it down the way you did has really helped in visualising what's going on. 

    I was aware of the pin spacing but was having problems really understanding what its doing and being able to hold that in my head while making the decisions you made. Seriously, thank you! 

     

    One really important thing I hadn't thought about was actually including the times of the various tweens into the equation, but it makes perfect sense.

     

    I also loved what you did and learnt quite a bit from the other 'pinning' thread too. Combined, both of these has really helped my increase my understanding.

     

    I'll make sure to fork everything.

     

    Once again, many many thanks!

     

    For mobile, I think I'm going to just wrap to a standard div and remove all the scrollTrigger action as I don't think it's necessary on a small screen.

     

    Cheers!

     

     

     

     

    • Like 3
  18. Hey @akapowl

     

    Thanks for the quick reply, much appreciated ;) 


    I did have something like that initially but wasn't sure if it was the right way to go as I thought the 'speed' would vary  too much depending on the monitor size, so was trying to work out what the best calculation would be. I'm on my laptop right now and not the big monitor but, to be honest, setting it to "+=1000%" does actually seem to work pretty well.

     

    Maybe I was overthinking it :/ 

     

    So, when we are using scrub, the end point can be something completely arbitrary and doesn't have to be related to any element to set the perceived 'speed' ?

    I think I may need to revisit some of the tutorials again!

     

    Cheers!

  19. Hi all,

     

    I've used the GS example for pinned layers to try and lay out part of a page, and it's kind-of working, but I think I'm having an issue with setting the correct height. Perhaps. 

    If you scroll down (really slowly!) in the example, the pinned text (that comes up on black) and the second image both seem to come in a lot quicker than the first image. I think I'm missing something in setting the end point of the trigger correctly. I've tried to get the overall height of #container using the row height but I'm missing something here.

    I'd like so that the scroll speed feels the same (i'm going to use ASScroll to add some smooth scrolling later), but for now I just need a little help understanding where I'm going wrong.

     

    EDIT: I haven't yet done anything to cope with mobile yet so unless the pen is full screen the text panel is going to be huge!

     

    Cheers!

    See the Pen NWNevYx by darkgr33n (@darkgr33n) on CodePen

×