Search the Community

bu videodaki animasyonun adı nedir nasıl yapabilirim uzun zamandır arıyordum bulamadım

I have applied id="smooth-wrapper" and id="smooth-content" by wrapping with div. But it is not working. I followed https://codesandbox.io/s/stupefied-minsky-pzceim?file=/src/App.js:733-752 but couldn't understand how to apply ScrollSmoother in these component based structure.

Gsap Rotating Arrow in circle,and is stopping well at various points, But Now want to trgieer some js code on each that stopping points, So that i can glow or animate each points logo , when stop on it for some time Just want to show Different alert or consoles on Different points

This is a general GSAP/JS question. In this example, when the user hovers over each image, a short gsap timeline is played. Because there are 4 separate images there are 4 separate timelines/event listeners calling elements' specific id's. Because all 4 elements have a same class property is it possible to create one timeline and one event listener for all elements with this class. (So when slight adjustments to timeline are made, I don't need to copy and past for every element that uses the same animation?) When I try this only the first one works. Hopefully this makes sense, I can explain in a different way. Thanks!

Hello I'm trying to get a grabbing icon while the user grabs and holds the Watering Can (Please see update). It would also be nice if the Watering Can would rotate down when hovering over the grass. (Done, please see update) Would it be difficult to only use javascript? (I tried already a lot of things, also by attaching an image to the mouse and let it follow it. The cursor always get's standard...) Would it be easier to use GSAP? (Setting it up, implenting it in my work? ) Thank you for any advice, Kind regards, Claude UPDATE: The codepen and the code below was updated but the Grass still doesn't grow. Any idea why? UPDATE 2: The grass grows The cursor still doesn't change to "grabbing" while grabbing the can. UPDATE 3: It seems to be a browser compatibility issue. Removed all the extra cursor code and it work fine in Firefox! CodePen: https://codepen.io/Shaman1975/pen/zYoEqzr HTML (Latest Update) <div class="can"> <svg width="15" height="100vh" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="droplets" width="15" height="21" viewBox="0 0 181 208" fill="url(#pattern)" patternUnits="userSpaceOnUse"> <path d="M94 160.7C94 186.65 72.97 207.68 47.02 207.68C21.07 207.68 0.0400085 186.65 0.0400085 160.7C0.0400085 134.75 28.04 116.44 47.02 84C61.82 112 94 134.76 94 160.7Z" fill="#00A3FF" /> <path d="M181 76.7C181 102.65 159.97 123.68 134.02 123.68C108.07 123.68 87.04 102.65 87.04 76.7C87.04 50.75 115.04 32.44 134.02 0C148.82 28 181 50.76 181 76.7Z" fill="#00A3FF" /> </pattern> </defs> <rect width="100%" height="100%" fill="url(#droplets)" /> </svg> <img id="gb03" class="gamebtn" alt="Watering Can" src="https://ga.chi.lu/wp-content/uploads/2021/02/watering-can.png" width="80" height="80"> </div> <img id="grass" class="grasspng" alt="Grass" src="https://ga.chi.lu/wp-content/uploads/2021/02/grass.png"> </img> CSS (Latest Update) * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { padding: 0; margin: 0; height: 100%; -ms-overflow-style: none; scrollbar-width: none; } body::-webkit-scrollbar, html::-webkit-scrollbar { display: none; } .can { position: relative; } #gb03 { position: absolute; } #droplets { visibility: hidden; } svg { top: 30px; left: -10px; position: absolute; z-index: 0; } .gamebtn { z-index: 2; width: 50px; height: 50px; margin-bottom: 5px; } .gamebtn:hover { filter: brightness(130%) drop-shadow(0 2px 5px black); } #grass { position: fixed; bottom: -40px; z-index: 7; transition: all 2s; transition-timing-function: linear; } JS (Latest Update) window.addEventListener("load", function () { console.clear(); tl = gsap .timeline({ paused: true }) .to(".gamebtn", { scale: 1.5, rotate: -25, duration: 0.25 }); var cur = 0; Draggable.create(".can", { onDragStart() { tl.timeScale(1).play(); gsap.to("#droplets", { repeat: -1, duration: 0.1, autoAlpha: 1, ease: "none", attr: { y: () => "+=" + 21 } }); }, onDragEnd(event) { var bottom = gsap.getProperty("#grass", "bottom"); if (bottom != "0") { gsap.to("#grass", { duration: 0.3, bottom: "+=10" }); } else { gsap.set("#grass", { bottom: 0 }); } tl.timeScale(2).reverse(); gsap.killTweensOf("#droplets"); gsap.set("#droplets", { autoAlpha: 0 }); } }); });

Hello everyone, since a few months I've been working on a wordpress website (with oxygen builder) hosted on digital ocean. Recently I added page transitions thanks to Barbajs and with GSAP I have a swipe up effect. On chrome I have no problem but on Safari the site is slow to load, I don't know if it's the videos that are slow or the GSAP or barba js. The website is currently protected on a private server I can't give you access but here is a piece of my js that calls barba and gsap : function video_text_animation() { let tl = gsap.timeline(); if (tl.scrollTrigger) { tl.scrollTrigger.kill(); } //////// Video Header title ////////////// var childSplit = new SplitText(".bloc_header--header", {type:"lines", linesClass: "bloc_header--header-child"}); var parentSplit = new SplitText(".bloc_header--header", { type: "lines", linesClass: "bloc_header--header-parent"}); var w = window.innerWidth; var size = w > 1366 ? "big" : "small"; if (size === "big") { tl = gsap.timeline(); tl.addLabel("animateVideo").from(childSplit.lines, { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); } return tl; } function animation_scroll_text() { gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline(); if (tl.scrollTrigger) { tl.scrollTrigger.kill(); } //////// Diptyque title ////////////// new SplitText(".dyptique__card-heading--title", {type:"lines", linesClass: "dyptique__card-heading--title-child"}); new SplitText(".dyptique__card-heading--title", {type:"lines", linesClass: "dyptique__card-heading--title-parent"}); var w = window.innerWidth; var size = w > 1366 ? "big" : "small"; if (size === "big") { gsap.utils.toArray(".dyptique__card-heading--title").forEach((section, i) => { tl = gsap.timeline({ scrollTrigger: { id: "trigger2", start: "center 80%", trigger: section, toggleActions: "play pause pause pause", }, }); tl.addLabel("animateDiptyque").from(section.querySelectorAll(".dyptique__card-heading--title-child"), { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); }); } //////// Content title ////////////// new SplitText(".bloc_contents--title", {type:"lines", linesClass: "bloc_contents--title-child"}); new SplitText(".bloc_contents--title", {type:"lines", linesClass: "bloc_contents--title-parent"}); if (size === "big") { gsap.utils.toArray(".bloc_contents--title").forEach((section, i) => { tl = gsap.timeline({ scrollTrigger: { id: "trigger3", start: "center 80%", trigger: section, toggleActions: "play pause pause pause", }, }); tl.addLabel("animateTitle").from(section.querySelectorAll(".bloc_contents--title-child"), { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); }); } return tl; } function add_scripts() { jQuery(document).ready(function ($) { "use strict"; $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/accueil/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">'); $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/le-mag/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">'); $('.center-title').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',}); $('.title-anim').attr({'data-aos-enable': 'true','data-aos': 'slide-up','data-aos-anchor-placement': 'top-bottom','data-aos-easing': 'ease','data-aos-duration': '400','data-aos-offset': '50',}); $('.center-title2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',}); $('.title-anim-02').attr({'data-aos-enable': 'true','data-aos': 'fade',}); $('.diptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.bloc_contents--text').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '200',}); $('.quadriptyque__card_1').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_3').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_4').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card--image').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-once': 'true',}); $('.triptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '200',}); $('.triptyque__card_3').attr({'data-aos-enable': 'true','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '400','data-aos': 'fade',}); $('.triptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.diptyque__card2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('body').addClass('oxygen-aos-enabled'); }); AOS.init({}); window.dispatchEvent(new Event('resize')); } function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } // Preload Animation function pageTransition_init() { var tl = gsap.timeline(); tl.set(".footer-main", {display: "none"}); tl.set(".logo-img-pre", {y:100}); tl.set(".loading-screen", {bottom: "-100%", opacity: 1}); tl.to(".loading-screen", {duration: 1.7, height: "100%", bottom: "0%", ease: "Expo.easeInOut",}); tl.to("#video_home_top video", {duration: 0, display: "block"}); tl.to(".header-main", {duration: 0, display: "block"}); tl.to(".footer-main", {duration: 0, display: "block"}); tl.to(".logo-img-pre", {duration: 0.7, delay:-0.7 , y:0, opacity:1, ease:"power4",}); tl.to(".loading-screen", {duration: 1, delay:1, height: "100%", bottom: "100%", ease: "power4",}); tl.to(".logo-img-pre", {duration: 0.3, delay:-1, opacity: 0, display:"none"}); return tl; } // Transition Functions function pageTransition() { var tl = gsap.timeline(); tl.set(".loading-screen", {bottom: "-100%", opacity: 1}); tl.to(".loading-screen", {duration: 1.2, height: "100%", bottom: "0%", ease: "Expo.easeInOut",}); tl.to(".loading-screen", {duration: 1, height: "100%", bottom: "100%", ease: "Expo.easeInOut",}); return tl; } function load_video() { const list_videos = document.getElementsByTagName("video"); for (var i = 0; i < list_videos.length; i++) { list_videos[i].load(); console.log(list_videos[i].readyState); } } jQuery(document).ready(function ($) { "use strict"; jQuery('html, body').animate({scrollTop:0}); var masterTimeline = new gsap.timeline(); masterTimeline .add(pageTransition_init()) .add(video_text_animation(), "-=1"); $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(1000); done(); } , enter(data) { jQuery('html, body').animate({scrollTop:0}); load_video(); var tl = gsap.timeline(); tl.set("#video_home_top video", {duration: 0, display: "block"}); tl.to(".header-main", {duration: 0, display: "block"}); tl.to(".footer-main", {duration: 0, display: "block"}); } }, ], views: [{ namespace: 'index', beforeEnter(data) { document.body.classList.add("oxy-overlay-header"); add_scripts(); switch_footer(); animation_scroll_text(); video_animation(); }, } }); }); });

Hi everyone. Can someone help me with animation like this ? https://miro.medium.com/max/800/1*T7YtwbVBbuhdO5g-FA5zKQ.gif The animation as usually start with delay and t looks wierd :( May be someone can give me advice or example. Thanks.

Hi, I creating a website and i using TweenMax. I've created line animation like this; Its connected with scroll. Animation is like that; First left long line going down then bottom line goes to right then right line starts from bottom to top finally top line start from right and goes to left and animation is ends. At the end we had this image. But there is something it will drive me crazy. At the start of animation lines goes normal (fast). But when its ending its very slow down like smoothing. Example at the start of animation i scrolling 1 click, lines with changes between 0 - 30px but the end of animation i scroll 1 click again and lins with changing between 0 - 10px. Why it like that? I want line is always change same pixel when i scroll same long. In other words i want to close this smoothing.

Image is getting called multiple times in network section of dev tools. when i am using BezierPlugin GSAP 2.1.2 and assigning image as css background issue.zip

I am new to ScrollMagic and still learning JS, I am trying to have the second slide in my codepen to last longer when you scroll through it. Right now in my #slideContainer, I've set width to 1000% because this sets the width of the pages to be expanded and have longer scroll when scrolling through them horizontally. #slideContainer { width: 1000%; height: 100%; position: absolute; } What I want is to only have this effect for a single slide only, in this case, only for Page two. I tried making another #slideContainer, which I named #longerScroll (it is commented out now) where it would be applied in a div for.page2. I tried to wrap .page1 wrapped inside the#slideContainer div and then .page3 and .page4 in a separate #slideContainer div and that didn't work so I am kinda lost. Would I have to change something in my JS and make an additional set of animation for .page2 with #longerScroll?

hi everybody, how proceed to mix diferente ease at start and end : i cant find doc? It possible ? Example: Something like thats, assuming the tween compute the half/time in the process ? TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:[Back.easeIn.config(1.2), Bounce.easeOut], }); or like this ? TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:{ start:Back.easeIn.config(1.2) , end:Bounce.easeOut }, }); or ... TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:{ '0':Back.easeIn.config(1.2) , '0.5':Bounce.easeOut }, }); or... TweenMax.to(bar, 1, { rotation:-Math.PI/2, easeIn:Back.config(1.2), easeOut:Bounce, });

hi guys how i can kill all current animation from target objet ? Related to doc , am not sure am understand. i get `TypeError: TweenLite.kill is not a function` so here the example what am target. Hold click will power Shake the hud. But if release click befor i click shakes animations, i want kills. So here my experiment When downClick pointerDW(e) { TweenLite.to(this.sprites.c2.scale, 0.2, { x: 3, y: 3, ease: Back.easeOut.config(1.7) }); this.sprites.c2.alpha = 0 TweenLite.to(this.sprites.c2, 1.3, { alpha: 1,rotation:Math.PI, ease: Power4.easeOut }); TweenLite.to(this.sprites.c2.scale, 1, { delay:0.2, x: 1.4, y: 1.4, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 3, points: 50, taper: "in", randomize: true, clamp: true}) }); TweenLite.to(this.scale, 0.2, { x: 0.75, y: 0.75, ease: Back.easeOut.config(1.7) }); TweenLite.to(this.scale, 1.2, { delay:0.2, x: 1.3, y: 1.3, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 2, points: 50, taper: "in", randomize: true, clamp: true}) }); this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: 0, y: 0, ease: SlowMo.ease.config(0.7, 0.7, false) }); }); }; and than, when release click i want kill all thoses. i use es6 decomposer the Error come from TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); pointerUP(e) { // kill all animations FIXME: ? TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); // start new animations ...... from the cancel this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: slot.position.zero.x, y: slot.position.zero.y, ease: Power4.easeInOut }); }); visual help .... thank for help

Hey so I'm currently making an animated graph to show how often I skip a song on Spotify. All I'm trying to do right now is bring in "Spotify" however no animation plays despite chrome dev tools saying there is no error. Also, I commented out line 209 in my HTML because for some reason it cannot link my DrawSVGPlugin. If anyone can help with one or both of the problems I'd greatly appreciate it; thanks.

Hi! If I use multiple times without a variable reference //var myVar = TweenLite.delayedCall(); TweenLite.delayedCall(); If I do not call the .kill(), it will increase my memory? Or the delayedCall() have an onComplete() Event to be able to kill() after the calling.? I use the delayedCall() in a loop multiple times with different parameters... Thanks a lot.

Hi everyone, So I'm looking at making an interactive timeline of famous people in history and there will be hundreds of people with associated data. I'm using react (gatsby specifically). I want to be able to map through the data object and render about 10 people at a time on this pathway, and it looks like they are at the back of the path. Then, when the user scrolls down say, the people move forward towards the user, on the timeline. Then when they get to the front of the timeline they fade away. In the meantime more people have appeared behind them as they move forward. What I think is a size animation, so they get bigger based on trigger points on the screen. But what the heck do I know?? Theres so much info out there I'm bamboozled. So what do you think - scrollmagic? gsap? Where do I even start yo?! Advice please!!!

Hello! I'm find the perfect animation example but it works only on one image and in default mode (autoplay on page load). I need to init this only on mouseenter event and for each current image. Important note: In this example hover works, but I need to copy animation effect, which works on page load, to hover event. The default hover animation isn't correct for me. Thanks This is example in codepen with default animation Init script var spriteImages = document.querySelectorAll( '.project-image' ); var spriteImagesSrc = []; for ( var i = 0; i < spriteImages.length; i++ ) { var img = spriteImages[i]; spriteImagesSrc.push( img.getAttribute('src' ) ); } console.log(spriteImagesSrc); var initCanvasSlideshow = new CanvasSlideshow({ addCanvasTo: '.canvas-wrapper', canvasStyleClass: 'canvas', stageWidth: 500, stageHeight: 500, sprites: spriteImagesSrc, displacementImage: 'http://i.imgur.com/2yYayZk.png', centerSprites: true, interactive: true, interactionEvent: 'hover', autoPlay: false, autoPlaySpeed: [10, 3], displaceScale: [200, 70], }); I'm found contidion to mouseenter and mouseleave event if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { slidesContainer.pointerover = function( mouseData ){ mouseX = mouseData.data.global.x; mouseY = mouseData.data.global.y; TweenMax.to( displacementFilter.scale, 6, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); rotateSpite(); }; slidesContainer.pointerout = function( mouseData ){ TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } The default animation settings is: var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); I thought I can do something like this if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { slidesContainer.pointerover = function( mouseData ){ var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); }; slidesContainer.pointerout = function( mouseData ){ TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } This is example in codepen with animation on hover Also I need to load all items, but loads only one item. Why?  I need to make loop with initialized script? I think it's a bad idea. Thanks

Hi, I was looking for animation on scrolling and i came across this So I played with it a little. I used scrollmagic to pin the layout during the duratoin of the box animation. So now i want to create similar animation timelines, with few changes. How do i put an individual timeline into a function and call it on scroll. Ive tried this syntax, but it doesnt seem to work : jQuery('.Screen').each(function () { var currentScreen = this; new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H }) .on('start', function () { console.log(this.triggerElement().id); }).addTo(controller); }); Thank you .

POST RESOLUTION EDIT: See Zach's comment below for a more modern approach to this problem. ---- Hi there. I have a responsive site where I want the content to stagger reveal as the user scrolls. The issue I'm having is that on load, the first few items (depending on screen height) are above the trigger and therefore just animate in together as opposed to staggered. Is there a way to have it so that the content that loads immediately staggers, and then the remaining elements animate like normal on scroll via ScrollMagic? ScrollReveal has a pretty good example of what I'm going for, with content staggering in on load, followed by then animating the lower elements in on scroll. Thanks!

Hello, This it's my first try with GSAP and I'd need your help to understand how should I think to solve the animation process. I want to achieve Violet water drop falls down on black background Then letters start animating - For extra effect I would break "V" letter into two paths so both lines they can get animated simultaneous. My problems: My main problem is how to control timing and control visitability of these paths or groups via js How can I hide cyan letters on the beginning and start with letters animation when the water drop falls into place? In load animation part: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%"}, 2); It seams I cant add delay parameter into the function like: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%", delay:"2"}, 2); In on click function I don't understand why violet drop isn't animating. If possible I would first have Violet water drop falls V letter gets animated then this animation is taken to the next left and right letters so that whole "logo" is reveald.

I'd like to say hello to everyone at the beginning. I'm a novice in JavaScript world and I have a question. I tried to create navigation for my first GSAP slider and I have no idea how to get started. I'd be grateful for all the tips. Regards, Novice

Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa. Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.

Hi, Just a neat little thing I discovered today, when using a calaculation in JS with the a possible output of 'NaN' you can prevent errors like this: var newWidth = value1*value2; TweenMax.set(element,{ width:newWidth || 0 }); Hope this helps someone out, regards, Ivo

I try to copy this website to study and I found that my fonts are not smoothly. I would like to gain your suggestion how to make website like this. Thank you, Kopkap. http://www.carlsberg.com/170/

Hey guys ! I've been trying to make this slider for the couple couple of days without much success. I have a slider and I'm trying to every time it finishes, it goes back to the first image, but it just stays in the same. Here is a snippet of my js. $(".right-arrow").click(function() { var contentSlides = $('.slider .slide'); var currentSlide = 0, tl = new TimelineMax(); tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 0 0 0)", x: 0}, {webkitClipPath: "inset(0 0 0 100%)", x: 10} ); if ( currentSlide < contentSlides.length ) { currentSlide++; } else if( currentSlide == (contentSlides.length -1) ) { currentSlide = 0; } tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 100% 0 0)", x: -40}, {webkitClipPath: "inset(0 0 0 0)", x: 0} ) }); Thanks in advance

I'm building an intro animation in Codepen and I wanted to tween the pseudo element `.marquee__tagline--logo::before`. I saw that this can be done using CSSRulePlugin, however it is just keeps throwing out errors. The pseudo element is showing up in dev tools, and it clearly is rendering on the page, so I'm unsure of what I'm doing wrong here. Any help would be greatly appreciated!